Dynamic Routes(동적 경로)

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

1. Convention(규칙)

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

동적 세그먼트는 layout, page, route 및 생성 메타데이터 함수에 params 프로퍼티로 전달됩니다.

2. 예시

예를 들어, 블로그가 app/blog/[slug]/page.js 라는 경로를 포함할 경우, 여기서 [slug]가 블로그 게시글의 동적 세그먼트입니다.

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

세그먼트에 대한 파라미터를 생성하는 방법을 알아보려면 generate Static Params(정적 파라미터 생성) 절을 참조하세요.

참고: 동적 세그먼트는 pages 디렉토리의 동적 라우트와 동일합니다.

3. 정적 파라미터 생성

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

1
export async function generateStaticParams() {
2
  const posts = await fetch('https://.../posts').then(res => res.json())
3

4
  return posts.map(post => ({
5
    slug: post.slug,
6
  }))
7
}

generateStaticParams 함수의 주요 이점은 효율적인 데이터 요청입니다. Fetch 요청을 사용하여 generateStaticParams 함수 내에서 콘텐츠를 가져오는 경우, 요청은 자동으로 중복 제거됩니다. 즉, 여러 generateStaticParams, 레이아웃 및 페이지에 걸쳐 동일한 인자를 가진 중복된 fetch 요청은 한 번만 수행되므로 빌드 시간이 단축됩니다.

Pages 디렉토리로부터 마이그레이션이 필요하면 마이그레이션 가이드를 참고하세요.

더 많은 정보 및 활용 사례는 generateStaticParams server function documentation를 참조하세요.

4. Catch-all(포괄) Segments

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

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

5. Optional Catch-all Segments

Catch-all 세그먼트는 이중 대괄호 안에 매개변수인 [[...폴더명]]을 포함하여 선택적으로 생성할 수 있습니다.

예를 들어, app/shop/[[...slug]]/page.js 는 /shop/clothes, /shop/clothes/tops, /shop/clothes/tops/t-shirts 이외에도 /shop 과 일치합니다.

catch-all 과 optional catch-all 세그먼트의 차이점은 optional을 사용하면 매개변수가 없는 경로도 일치한다는 것입니다. (위 예제에서는 /shop).

6. TypeScript

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

1
export default function Page({ params }: { params: { slug: string } }) {
2
  return <h1>My Page</h1>
3
}

참고: 이 기능은 향후 TypeScript plugin에 의해 자동으로 처리될 수 있습니다.