Next.js Routing Guide

동적 세그먼트 파라미터

// await params 결과:
{
  slug: "nextjs-routing"
}

이 값은 URL의 [slug] 부분에서 자동으로 추출됩니다.

Next.js 라우팅에 대해 알아봅니다.

이 페이지의 소스 코드:

// app/blog/[slug]/page.tsx — 단일 파일
export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params  // "nextjs-routing"
  const post = await getPost(slug)
  return <div><h1>{post.title}</h1></div>
}