정확한 세그먼트 이름을 미리 알 수 없고 동적 데이터에서 라우트를 생성하려면, 요청 시나 빌드 시에 채워지는 동적 세그먼트를 사용할 수 있습니다.

Convention

동적 세그먼트는 대괄호로 폴더 이름을 감싸서 생성할 수 있습니다. 예를 들어, [id] 또는 [slug]입니다.

동적 세그먼트는 레이아웃, 페이지, 라우트 및 generateMetadata 함수에 params prop으로 전달됩니다.

Example

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

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

[코드] app/blog/[slug]/page.tsx

Route	Example URL	params
app/blog/[slug]/page.js	/blog/a	params { slug: 'a' }
app/blog/[slug]/page.js	/blog/b	{ slug: 'b' }
app/blog/[slug]/page.js	/blog/c	{ slug: 'c' }

generateStaticParams() 페이지를 참조하여 세그먼트의 params를 생성하는 방법을 알아보세요.

알아두면 좋은 사항: Dynamic Segments는 pages 디렉토리의 Dynamic Routes와 동등합니다.

Generating Static Params

The generateStaticParams 함수는 동적 route segment와 결합하여 빌드 시에 동적으로 라우트를 생성하는 데 사용할 수 있습니다.

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