Next.js 04 - 페이지 라우팅

1. 기본 동적 라우팅 [param]

대괄호 [] 를 사용하여 동적 세그먼트를 정의한다.

// app/example/[id]/page.tsx
import { useParams } from 'next/navigation';

export default function ExamplePage() {
  const params = useParams();
  return <div>{params.id}</div>;
}

 

/example 로 시작하는 동적 경로는 모두 해당 파일로 매칭된다.

ex) /example/1, /example/abc...

 

2. 모든 세그먼트 대응 [...param]

파라미터가 여러 개일 경우 배열로 수집한다.

// app/example/[...id]/page.tsx
import { useParams } from 'next/navigation';

export default function ExamplePage() {
  const params = useParams();
  return <div>{JSON.stringify(params.id)}</div>;
}

 

예를 들어, /example/a/b/c 의 경로로 접속할 경우, params는 a, b, c를 배열의 형태로 수집한다.

params.id 는 ['a', 'b', 'c'] 가 되는 것.

 

3. 옵션 세그먼트 [[...param]]

위 예시는 /example/1 이나 /example/1/3 같은 경로에 모두 대응된다.

하지만 /example 경로에는 대응되지 않으므로, 옵션 세그먼트를 사용하면 된다.