동적 라우트

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

컨벤션

동적 세그먼트는 폴더 이름을 대괄호로 묶음으로써 생성할 수 있습니다.
ex) [folderName], [id], [slug]

Example

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

/* app/blog/[slug]/page.js */

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

전달받는 params에 따라 URL이 바뀝니다.
params = { slug : 'a' } --> URL : /blog/a
params = { slug : 'b' } --> URL : /blog/b

세그먼트에 대한 매개변수를 생성하는 방법은 이후 generateStaticParams()에서 알아보겠습니다.

정적 매개변수 생성(generateStaticParams)

generateStaticParams 함수는 동적 라우트 세그먼트와 함께 사용되어 빌드 타임에 라우트를 정적으로 생성할 수 있습니다.

/* app/blog/[slug]/page.js */

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 요청이 한 번만 이루어지므로 빌드 시간이 단축됨을 의미합니다.

• generateStaticParams docs 참고

Catch-all 세그먼트

동적 세그먼트는 폴더 이름 앞에 ...을 추가해서 catch-all(광범위) 세그먼트로 확장될 수 있습니다. ex) [...foldername]

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

ex) 라우트 : app/shop/[...slug]/page.js

URL	params
/shop/a	{ slug: ['a'] }
/shop/a/b	{ slug: ['a', 'b'] }
/shop/a/b/c	{ slug: ['a', 'b', 'c'] }

선택적 Catch-all 세그먼트

폴더 이름에 이중 대괄호를 사용하여 Catch-all 세그먼트를 선택적 Catch-all 세그먼트로 만들 수 있습니다. ex) [[...foldername]]

Catch-all 세그먼트와의 차이점은 선택적 Catch-all 세그먼트는 매개변수가 없어도 매치된다는 점 입니다.

ex) 라우트 : app/shop/[[...slug]]/page.js

URL	params
/shop	{}
나머진 Catch-all과 동일

TypeScript 사용시

TypeScript를 사용할 때 라우트 세그먼트에 따라 매개변수 타입을 추가할 수 있습니다.

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

Route	params 타입 정의
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