Next.js Routing Guide

params: { slug: "nextjs-routing" }

이 값은 await params로 추출합니다.

Next.js 라우팅에 대해 알아봅니다. 폴더를 중첩하면 URL 세그먼트가 중첩되고, [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>
  )
}

파일 구조

app/
├── page.tsx          → /
└── blog/
    ├── page.tsx      → /blog
    └── [slug]/
        └── page.tsx  → /blog/nextjs-routing  ← 현재 페이지