Dynamic Routes

정확한 세그먼트 이름을 미리 알 수 없고 동적 데이터로 라우트를 생성할 경우, 요청 시 또는 빌드 시 미리 렌더링된 동적 세그먼트를 사용할 수 있습니다.

Convention

동적 세그먼트는 파일 또는 폴더 이름을 대괄호로 감싸서 만들 수 있습니다: [segmentName]. 예를 들어, [id] or [slug].

동적 세그먼트는 useRouter에서 접근할 수 있습니다.

Example

예를 들어, 블로그는 [slug]가 블로그 게시물의 동적 세그먼트인 pages/blog/[slug].js 라우트를 포함할 수 있습니다.

import { useRouter } from 'next/router'
 
export default function Page() {
  const router = useRouter()
  return <p>Post: {router.query.slug}</p>
}

Catch-all Segments

동적 세그먼트는 대괄호 안에 줄임표를 추가하여([...segmentName]) 모든 후속 세그먼트를 포함하도록 확장할 수 있습니다.

예를 들어, pages/shop/[...slug].js는 /shop/clothes뿐만 아니라 /shop/clothes/tops, /shop/clothes/tops/t-shirts 등에도 일치합니다.

Optional Catch-all Segments

Catch-all 세그먼트는 매개변수를 이중 대괄호에 포함하여 선택 사항으로 만들 수 있습니다: [[...segmentName]].

예를 들어, pages/shop/[[...slug]].js는 /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts뿐만 아니라 /shop과도 일치합니다.

catch-all과 optional catch-all 세그먼트의 차이점은 optional의 경우 매개변수 없이도 경로가 일치한다는 점입니다(위 예제의 shop).