[Next.js 14] 1. Routing - 8

9. Dynamic Routes

• 사전에 정확한 segment 명칭을 알 수 없거나, 동적 데이터를 활용해서 route를 생성하고자 할 때 buildTime에 prerendered 되거나 요청 시 동적으로 segment를 채워주는 Dynamic Routes를 사용할 수 있다.
• [folderName]과 같이 대괄호를 이용해 생성할 수 있으며, params prop 형태로 layout, page, route, generateMetadata function에 전달된다.

9-1. Example

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

• app/blog/[slug]/page.js 폴더 구조를 가지고 있을 때, slug 부분이 동적으로 전달되는 형태.
• 여기서는 블로그 포스트를 예로 들 수 있는데, /blog/a -> {slug : 'a'} /blog/b -> {slug : 'b'}와 같은 형태가 된다.

9-2. Generating Static Paramas

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

• generateStaticParamas 함수는 build time에 정적으로 route를 생성할 수 있다. 
• 함수 내부에서 fetch() 함수를 이용해 API를 요청하는 경우, 자동적으로 memoized를 수행하고 이후 generateStaticParams, Layouts, page 등에서 동일한 인수를 사용하는 요청을 1번만 수행하여 build time을 감소시킨다.

9-2. Catch-all Segments

• [...folderName]과 같이 사용하면 하위 segment를 모두 관리할 수 있다.
• 예를 들어, app/shop/[...slug]/page.js과 같이 Dynamic Route 구성할 때 /shop/a, /shop/a/b, /shop/a/b/c 모두 처리가 가능하다. {slug : ['a', 'b', 'c']}

9-3. Optional Catch-all Segments

• Catch-all Segments를 한 번 더 감싸면 Optional하게 사용할 수 있다. [[...folderName]].
• Catch-all Segments와 동일하게 하위 경로 모두 맵핑할 수 있다.

Optional Catch-all Segments vs Catch-all Segments
- 2가지 모두 맵핑 방식에는 차이가 없다.
- 그러나, Optional Catch-all Segments는 기본 경로도 포함된다. /shop -> {} 빈 객체 반환. Catch-all Segments는 기본 경로는 불가능하고, 반드시 하위 경로가 있어야 한다. /shop -> 맵핑되지 않는다.

9-4. Typescript 타입 정의

• Typescript 사용 시 위처럼 타입 정의를 해주면 된다.

처음 뵙겠습니다.

Next.js 사용하면서 처음 본 개념이거나, 이해하기 어려운 부분(?)은 붉은색 볼드처리 해봤다.

 

 

Preference

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

Routing: Dynamic Routes | Next.js