5.Next.js App Router에 대해 알아보자(6. 다이나믹 라우트 사용하기)

next.js는 동적으로 라우팅을 해야 되는 경우(ex. 상품 상세 정보, 마케팅 상세 정보)도 자체적으로 지원합니다. 이 경우 요청하는 시점이나 빌드되는 시점에 페이지가 만들어집니다.

사용법

[id]와 같은 형태로 사용해주면 됩니다. id는 세그먼트로 layout, page, route, 메타 데이터 생성 함수의 인자로 넣을 수 있습니다.

export const Page = ({ params }: { params: { id: string } }) => 
  <div>{params.id}</div>
;

만약 /blog/a라는 요청이 들어오면 a의 관한 글을 가져올 것이고 /blog/b라는 요청이 들어오면 b의 관한 글을 들고 올 것입니다.

정적 파라미터 생성하기

generateStaticParams() 함수는 빌드 타임에 동적 라우트 세그먼트를 받아서 정적인 라우트 파일로 생성하기 위해 사용하는 함수입니다. 이거 쓰면 즉각적으로 요청하는 시간에 동적으로 페이지를 불러오지 않고 미리 만들어진 파일을 유저에게 보여줍니다.

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

generateStaticParams() 함수의 가장 큰 장점은 스마트하게 데이터를 검색한다는 것입니다. 만약 generateStaticParams() 로 검색을 요청한다면 해당 요청은 자동으로 메모이제이션 됩니다. 이 말은 같은 매개변수로 요청한 다수의 generateStaticParams() 함수는 오직 한 번만 수행되고 레이아웃과 페이지를 딱 한 번만 만들게 되어 빌드 시간 단축에 도움을 줍니다

모든 세그먼트 잡기

동적 세그먼트를 쟐 활용하면 모든 경우에 세그먼트를 잡을 수 있게 해줍니다. [...폴더이름]과 같은 형태로 지정하면 됩니다.

1. app/shop/[...slug]/page.js: /shop, {}
2. app/shop/[...slug]/page.js: /shop/a, { slug: ['a'] }
3. app/shop/[...slug]/page.js: /shop/a/b, { slug: ['a', 'b'] }
4. app/shop/[...slug]/page.js: /shop/a/b/c, { slug: ['a', 'b', 'c'] }

타입스크립트

params의 타입을 반드시 정의해 줘야 합니다.

export const Page({ params }: { params: { slug: string } }) => 
  <h1>My Page</h1>
;

여러 타입이 될 수 있습니다.

1. app/blog/[slug]/page.js: { slug: string }
2. app/blog/[...slug]/page.js: { slug: string[] }
3. app/[categoryId]/[itemId]/page.js: { categoryId: string; itemId: string; }