[next 14 공식문서 부시기] 2.6 Dynamic Routes

Dynamic Routes(동적경로)

 

동적 데이터로부터 경로를 생성하고 싶을 때, Dynamic Segments를 사용 해 요청 시 채워지거나 빌드 시 미리 렌더링될 수 있습니다.

사용법

 

폴더 이름을 대괄호(ex: [folderName])로 묶어 생성할 수 있습니다.

 

Dynamic Segments 는 layout, page, route, generateMetadata 함수 등등에 params 가 props 로 전달됩니다.

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

기본 형태

 

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

모든 세그먼트 캡처 형태 (Catch-all Segments)

 

Route	URL	params
app/shop/[...slug]/page.js	/shop/a	{ slug: ['a'] }
app/shop/[...slug]/page.js	/shop/a/b	{ slug: ['a', 'b'] }

선택적인 모든 세그먼트 캡처 형태 (Catch-all Segments)

Catch-all Segments 와 차이점은 파라미터가 없어도 접근이 접근이 가능함

 

Route	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'] }

매개변수 타입

 

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

정적 매개변수 생성

 

generateStaticParams 함수를 Dynamic Segments와 함께 사용하면 요청 시 빌드할 때 경로를 정적으로 생성할 수 있습니다.

 

generateStaticParams 함수 내에 fetch 사용해서 데이터를 가져온 경우 요청이 자동적으로 기억된다. 따라서 여러 개의 generateStaticParams, Layouts 및 Pages 에 걸쳐 동일한 인수를 가진 fetch 요청이 한 번만 수행되므로 빌드 시간이 줄어듭니다.

※ generateStaticParams() 의 이해 : 이 함수는 동적 라우트를 정적으로 생성하는 데 사용되며, 동적으로 생성하는 것보다 성능이 이점이 있을 수 있다.

 

※ 위 에서 언급한 fetch 는 Next.js는 기본 웹 fetch() API를 서버의 각 요청이 자체 캐싱 될 수 있게 확장한 것이다.

// app/products/[category]/[product]/page.tsx
import { fetchPage } from '@/lib/requests'
import { notFound } from 'next/navigation'

export async function generateStaticParams() {
  const page = await fetchPage('/posts?populate=deep')
  return page.data.map((post) => ({
    slug: post.attributes.Seo.Url,
    id: post.id,
  }))
}

export default async function ProductPage({params}) {
  const { id } = params
  const page = await fetchPage(`/posts/${id}?populate=deep`)
  if (!page) {
    return notFound()
  }
  return <h1>{id}</h1>
}

---

참고

https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes