동적 세그먼트 (Dynamic Segments)

[slug]처럼 대괄호로 감싼 폴더 이름은 동적 세그먼트를 생성합니다. 하나의 page.tsx로 여러 URL을 처리할 수 있습니다. 아래 링크를 클릭해서 각기 다른 slug로 같은 page.tsx가 렌더링되는 것을 확인해보세요.

파일 구조

app/blog/
└── [slug]/
    └── page.tsx  → /blog/:slug (단일 파일로 모든 slug 처리)

다양한 slug 값 체험

같은 page.tsx가 각기 다른 params.slug를 받아 다른 콘텐츠를 렌더링합니다.

/blog/hello-world

params: { slug: "hello-world" }

/blog/nextjs-routing

params: { slug: "nextjs-routing" }

/blog/dynamic-segments

params: { slug: "dynamic-segments" }

/blog/custom-slug

params: { slug: "custom-slug" }

핵심 코드

// app/blog/[slug]/page.tsx
export default async function BlogPostPage({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  const post = await getPost(slug)

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  )
}