[Next 13] Routing - 동적 경로

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

Convention

• 동적 세그먼트는 폴더 이름을 대괄호로 묶어 생성할 수 있습니다. [folderName]. 예를 들어 [id] 또는 [slug]
• 동적 세그먼트는 layout, page, route, generateMetadata 에 params props로 전달됩니다.

Example

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

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

• /blog/a ⇒ { slug: ‘a’}

정적 매개변수 생성

• 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 함수의 주요 이점은 스마트한 데이터 검색입니다. fetch 요청을 사용하여 generateStaticParams 함수 내에서 콘텐츠를 가져오는 경우 요청이 자동으로 메모됩니다.
• 이는 여러 generateStaticParams, 레이아웃 및 페이지에 걸쳐 동일한 인수를 사용하는 가져오기 요청이 한 번만 수행되므로 빌드 시간이 단축된다는 의미입니다.

포괄 세그먼트 (Catch-all Segments)

• 대괄호 [...folderName] 안에 줄임표를 추가하면 동적 세그먼트를 모든 후속 세그먼트로 확장할 수 있습니다.
• 예를 들어 app/shop/[...slug]/page.js는 /shop/clothes와 일치하지만 /shop/clothes/tops, /shop/clothes/tops/t-shirts 등과도 일치합니다.
• 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/shop/clothes , shop/clothes/tops , /shop/clothes/tops/t-shirt 도 일치합니다.
• catch-all 세그먼트와 선택적 catch-all 세그먼트의 차이점은 선택 사항을 사용하면 매개변수가 없는 경로도 일치한다는 것입니다.
• 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’]}

TypeScript

• TypeScript를 사용할 때 params 구성된 경로 세그먼트에 따라 유형을 추가할 수 있습니다.

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

• app/blog/[slug]/page.js => { slug: string }
• app/shop/[...slug]/page.js => { slug: string[] }
• app/[categoryId]/[itemId]/page.js => { categoryId: string, itemId: string }

Reference

• https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes