~22 min · dynamic segment, catch-all, optional
| Folder pattern | 예 URL | params 모양 |
|---|---|---|
[slug] | /blog/hello | { slug: 'hello' } |
[...slug] | /docs/a/b/c | { slug: ['a','b','c'] } |
[[...slug]] | /docs 또는 /docs/a/b | { slug: undefined } 또는 { slug: ['a','b'] } |
한 path 안에 dynamic segment 여러 개 가능. params 가 모든 걸 한 객체로 합친 모양이야.
Request 가 /blog/foo 로 들어왔는데 generateStaticParams 가 미리 build 안 했으면, default 는 on demand render. Unknown slug 가 404 이게 하려면 export const dynamicParams = false.
// app/docs/[[...slug]]/page.tsx
type Props = { params: Promise<{ slug?: string[] }> };
export default async function DocsPage({ params }: Props) {
const { slug } = await params;
if (!slug) return <DocsIndex />;
const path = slug.join('/'); // 'getting-started/install'
const doc = await getDoc(path);
if (!doc) notFound();
return <DocContent doc={doc} />;
}// app/[locale]/blog/[slug]/page.tsx
import { notFound } from 'next/navigation';
type Props = { params: Promise<{ locale: string; slug: string }> };
export default async function Page({ params }: Props) {
const { locale, slug } = await params;
const post = await getPost(locale, slug);
if (!post) notFound();
return <Article post={post} />;
}// app/blog/[slug]/page.tsx
export const dynamicParams = false;
export async function generateStaticParams() {
const slugs = await getAllPostSlugs();
return slugs.map(slug => ({ slug }));
}app/docs/[[...slug]]/page.tsx 로 docs route 만들어 — /docs (index) 와 /docs/a/b/c (nested doc) 둘 다 서빙. Known slug 3 개에 generateStaticParams 추가하고 dynamicParams = false 가 unknown 을 404 시키는지 확인.아직 댓글이 없어요. 첫 댓글을 남겨보세요.