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

컨벤션

동적 세그먼트는 폴더 이름을 대괄호로 묶어 만들 수 있습니다. [folderName] 예, [id] 또는 [slug]

동적 세그먼트는 layout, page, route 및 generateMetadata 함수에 params prop으로 전달됩니다.

예제

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

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

세그먼트에 대한 파라미터를 생성하는 방법을 알라보려면 generateStaticParams() 페이지를 참조하세요.

<aside> 💡 Good to know: 동적 세그먼트는 pages 디렉토리의 동적 경로와 동일합니다.

</aside>

정적 params 생성

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

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