Hello World

params: { slug: "hello-world" }

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

첫 번째 블로그 포스트입니다. Next.js의 파일 기반 라우팅을 사용하면 이렇게 동적 세그먼트로 각 포스트에 고유한 URL을 부여할 수 있습니다.

핵심 파일 코드

// 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/hello-world  ← 현재 페이지