동적 세그먼트

미리 정의된 URL 주소로 라우팅 하는 것이 아닌, 사용자가 접근한 경로 혹은 상황에 따라 동적인 라우팅을 제공하고 싶을 때 사용. 폴더명을 대괄호[]로 감싼 폴더를 만들면 어떤 링크로 접근해도 해당 폴더의 페이지로 연결됨. 동적 세그먼트는 params로 layout, page, route, generateMetadata에 전달됨

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

포괄 세그먼트

대괄호 안에 줄임표를 추가하면 동적 세그먼트를 모든 후속 세그먼트 로 확장할 수 있음. [...folderName]

선택적 포괄 세그먼트

이중 대괄호 안에 매개변수를 포함하여 포괄 세그먼트를 선택 사항으로[[...folderName]] 만들 수 있음. 포괄 세그먼트와는 다르게 매개변수가 없는 경로도 일치

타입스크립트와 함께 사용

// app/[categoryId]/[itemId]/page.js
export function Page({
  params,
}: {
  params: { categoryId: string; itemId: string }
}) {
  return <h1>My Page</h1>
}

generateStaticParams

동적 경로를 사용하면 자동으로 동적 렌더링이 적용되어 SSG 사용이 불가능하지만 generateStaticParams를 사용하면 정적 페이지를 생성할 수 있음

<aside> 💡 재검증(ISR) 중에는 generateStaticParams다시 호출되지 않음

</aside>