[ Routing ] Dynamic Routes

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

---

Dynamic Routes 규칙

대괄호([])로 폴더 이름을 감싸면 동적 세그먼트를 생성할 수 있다. 예를 들어, [id] 또는 [slug]이다.

동적 세그먼트는 layout, page, route, 그리고 generateMetadata 함수의 params 속성으로 전달된다.

---

Dynamic Routes 예시

블로그에서는 [slug]가 블로그 게시물의 동적 세그먼트인 다음과 같은 route app/blog/[slug]/page.js를 포함할 수 있다.

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

Route	Example URL	params
app/blog/[slug]/page.js	/blog/a	{ slug: 'a' }
app/blog/[slug]/page.js	/blog/b	{ slug: 'b' }
app/blog/[slug]/page.js	/blog/c	{ slug: 'c' }

---

Generating Static Params

generateStaticParams 함수는 동적 라우트 세그먼트와 함께 사용하여 요청 시간이 아닌 빌드 시간에 정적으로 라우트를 생성하는 데 사용할 수 있다.

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

generateStaticParams 함수의 주요 이점은 데이터의 스마트한 검색이다. generateStaticParams 함수 내에서 fetch 요청을 사용하여 콘텐츠를 가져오는 경우, 요청은 자동으로 중복 제거된다.

이를 통해 여러 generateStaticParams, layout, page에서 동일한 인수를 가진 fetch 요청은 한 번만 실행되어 빌드 시간을 단축시킨다.

---

Catch-all Segments

동적 세그먼트는 대괄호 안에 점 세 개 [...]을 추가하여 후속 세그먼트를 모두 catch할 수 있다.

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

Route	Example URL	params
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/a/b/c	{ slug: ['a', 'b', 'c'] }

---

Optional Catch-all Segments

Catch-all 세그먼트는 이중 대괄호 안에 매개변수를 포함하여 선택적으로 만들 수 있다. [[...folderName]]

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

Route	Example URL	params
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'] }
app/shop/[[...slug]]/page.js	/shop/a/b/c	{ slug: ['a', 'b', 'c'] }

---

Typescript 사용

TypeScript를 사용할 때는 설정된 라우트 세그먼트에 따라 params에 대한 타입을 추가할 수 있다.

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

Route	params Type Definition
app/blog/[slug]/page.js	{ slug: string }
app/shop/[...slug]/page.js	{ slug: string[] }
app/[categoryId]/[itemId]/page.js	{ categoryId: string, itemId: string }

---

[출처]
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes