동적 라우트

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

규칙

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

Dynamic Segments는 params prop으로 layout, page, route 및 generateMetadata 함수에 전달됩니다.

예제

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

// app/blog/[slug]/page.tsx
export default function Page({ params }: { params: { slug: string } }) {
  return <div>My Post: {params.slug}</div>;
}

라우트	예제 URL	params
app/blog/[slug]/page.js	/blog/a	{ slug: 'a' }
app/blog/[slug]/page.js	/blog/b	{ slug: 'b' }
app/blog/[slug]/page.js	/blog/c	{ slug: 'c' }

세그먼트의 매개변수를 생성하는 방법에 대한 자세한 내용은 generateStaticParams() 페이지를 참조하세요.

알아두면 좋은 점:
Dynamic Segments은 pages 디렉토리의 Dynamic Routes와 동일합니다.

정적 매개변수 생성

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

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

generateStaticParams 함수의 주요 이점은 데이터의 스마트한 검색입니다. generateStaticParams 함수 내에서 fetch 요청을 사용하여 콘텐츠를 가져오는 경우, 요청은 자동으로 중복 제거됩니다. 이는 동일한 인수를 사용하는 여러 generateStaticParams, 레이아웃 및 페이지에서 fetch 요청이 한 번만 실행되어 빌드 시간이 단축되는 것을 의미합니다.

pages 디렉토리에서 마이그레이션하는 경우 마이그레이션 가이드를 참조하세요.

더 많은 정보와 고급 사용 사례는 generateStaticParams 서버 함수 문서를 참조하세요.

Catch-all 세그먼트

Catch-all 세그먼트는 대괄호 안에 말줄임표를 추가하여 연속되는 세그먼트를 catch-all할 수 있습니다. 예를 들어, app/shop/[...slug]/page.js는 /shop/clothes뿐만 아니라 /shop/clothes/tops, /shop/clothes/tops/t-shirts 등과 일치합니다.

라우트	예제 URL	params
app/shop/[...slug]/page.js	/shop/a	{ slug: ['a'] }
app/shop/[...slug]/page.js	/shop/a/b	{ slug: ['a', 'b'] }
app/shop/[...slug]/page.js	/shop/a/b/c	{ slug: ['a', 'b', 'c'] }

Optional Catch-all 세그먼트

Catch-all 세그먼트는 매개변수를 이중 대괄호로 만들어 optional하게 만들 수 있습니다. 예를 들어, app/shop/[[...slug]]/page.js는 /shop뿐만 아니라 /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts와도 일치합니다.

catch-all과 optional catch-all 세그먼트의 차이점은 optional의 경우 매개변수 없이 라우트도 일치한다는 것입니다.

라우트	예제 URL	params
app/shop/[[...slug]]/page.js	/shop	{}
app/shop/[[...slug]]/page.js	/shop/a	{ slug: ['a'] }
app/shop/[[...slug]]/page.js	/shop/a/b	{ slug: ['a', 'b'] }
app/shop/[[...slug]]/page.js	/shop/a/b/c	{ slug: ['a', 'b', 'c'] }

TypeScript

TypeScript를 사용하는 경우 구성된 라우트 세그먼트에 따라 params에 대한 타입을 추가할 수 있습니다.

// app/blog/[slug]/page.tsx
export default function Page({ params }: { params: { slug: string } }) {
  return <h1>My Page</h1>
}

라우트	params 타입 정의
app/blog/[slug]/page.js	{ slug: string }
app/shop/[...slug]/page.js	{ slug: string[] }
app/[categoryId]/[itemId]/page.js	{ categoryId: string, itemId: string }

요약

• 동적 라우트는 미리 알 수 없는 세그먼트 이름을 가지고 있을 때 사용.
• Dynamic Segments를 사용하여 동적 데이터에 기반하여 라우트를 생성 가능.
• 동적 세그먼트는 대괄호로 감싸진 폴더 이름으로 생성.
• Dynamic Segments는 params prop으로 다른 함수들에 전달.
• 예제로는 블로그 게시물을 다루는 동적 세그먼트를 포함하는 라우트가 있음.
• TypeScript를 사용하면 params에 대한 타입 정의를 추가할 수 있음.
• generateStaticParams 함수를 사용하여 정적 매개변수를 생성하여 빌드 시간에 정적으로 라우트를 생성할 수 있음.
• Catch-all 세그먼트를 사용하여 연속되는 세그먼트를 일치시킬 수 있음.
• Optional Catch-all 세그먼트를 사용하여 세그먼트를 선택적으로 만들 수 있음.