Dynamic Segments
params: { slug: "dynamic-segments" }
이 값은 await params로 추출합니다.
동적 세그먼트 심층 가이드입니다. [segmentName]으로 감싸면 데이터 기반의 여러 페이지를 하나의 page.tsx로 처리할 수 있습니다.
params: { slug: "dynamic-segments" }
이 값은 await params로 추출합니다.
동적 세그먼트 심층 가이드입니다. [segmentName]으로 감싸면 데이터 기반의 여러 페이지를 하나의 page.tsx로 처리할 수 있습니다.
// 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/dynamic-segments ← 현재 페이지