[Next.js] Dynamic Routes

정확한 세그먼트 이름을 미리 알지 못하고 동적 데이터로 경로를 생성하려는 경우, 요청 시 채워지거나 빌드 타임에 미리 랜더링되는 동적 세그먼트를 사용할 수 있습니다.

Convention

동적 세그먼트는 폴더 이름을 대괄호로 묶어 만들 수 있습니다.

동적 세그먼트는 layout, page, route 및 generateMetadata 함수의 매개변수로 전달됩니다.

Example

예를 들어 블로그에는 다음과 같은 경로 app/blog/[slug]/page.js가 포함될 수 있으며, 여기서 [slug]는 블로그 게시물의 동적 세그먼트입니다.

export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>
}

정적 Params 생성하기

generateStaticParams 함수는 동적 라우트 세그먼트와 함께 사용하여 요청 시 온디맨드가 아닌 빌드 시점에 경로를 정적으로 생성할 수 있습니다.

export async function generateStaticParams() {
  const posts = await fetch('https://.../posts').then((res) => res.json())
 
  return posts.map((post) => ({
    slug: post.slug,
  }))
}

generateStaticParams 함수의 가장 큰 장점은 스마트한 데이터 검색입니다. 가져오기 요청을 사용하여 generateStaticParams 함수 내에서 콘텐츠를 가져오면 요청이 중복을 자동으로 제거됩니다. generateStaticParams, layout, page에 동일한 인수를 가진 가져오기 요청은 한 번만 수행되므로 빌드 시간이 단축됩니다.

Catch-all 세그먼트

동적 세그먼트는 괄호 안에 줄임표를 추가하여 [...folderName] 안에 catch-all 후속 세그먼트로 확장할 수 있습니다.

예를 들어 app/shop/[...slug]/page.js는 shop/clothes 뿐만 아니라, shop/clothes/tops , shop/clothes/t-shirts 모두 포함됩니다.

선택적 Catch-all 세그먼트

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

예를 들어 app/shop/[[...slug]]/page.js는 shop/clothes 뿐만 아니라, shop/clothes/tops , shop/clothes/t-shirts 그리고 /shop 까지 포함합니다.