Dynamic Routes

기존 next의 dynamic route와 동일한 기능.

동적 세그먼트 : 요청 시 다운 받거나, 빌드 시 미리 렌더링됨

Convention

[folderName]

Example

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

페이지인 경우 params props로 dynamic route 값이 넘어옴.
app/blog/[slug]/page.js -> params : {slug : 'a'}

generateStaticParams

generateStaticParams : 빌드 시점에 경로를 정적으로 생성 가능하도록 해주는 함수

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

generateStaticParams 내부에서 fetch된 데이터는 다른 페이지의 generateStaticParams에서 데이터를 fetch 하더라도 한번만 데이터를 받아옴.

Catch-all segments

동적 세그먼트는 모든 하위 세그먼트를 가져오도록 확장 될 수 있음

Convention

[...folderName]

app/shop/[...slug]/page.js 에 /shop/a/b/c 로 접근시, param : {slug : [ 'a', 'b', 'c']}

Optional Catch-all segments

Convention

[[...folderName]]

기존 catch-all과의 차이점은 /shop 으로 접근시 param에 잡히는지의 여부

Catch-all segments 에서는 아무것도 잡히지 않지만,
Optional Catch-all segments 에서는 {} 로 잡힌다.