Skip to main content

Dynamic Routes — 동적 라우트

Next.js는 대괄호를 사용해 동적 URL 세그먼트를 정의합니다. 3가지 패턴이 있으며, 각각 캡처하는 세그먼트 수가 다릅니다.

파일 구조

dynamic-routes/
├── page.tsx              ← 이 페이지 (인덱스)
├── blog/
│   └── [slug]/
│       └── page.tsx      ← /blog/:slug (단일 파라미터)
├── shop/
│   └── [...slug]/
│       └── page.tsx      ← /shop/* (catch-all)
└── docs/
    └── [[...slug]]/
        └── page.tsx      ← /docs/* (optional catch-all)

[slug] — 단일 파라미터

정확히 1개의 URL 세그먼트를 캡처합니다.

/blog/my-first-post/blog/hello-world

[...slug] — Catch-all

1개 이상의 URL 세그먼트를 배열로 캡처합니다. 최소 1개 세그먼트가 필수입니다.

/shop/clothing/shop/clothing/shirts/shop/electronics/phones/iphone

[[...slug]] — Optional Catch-all

0개 이상의 URL 세그먼트를 캡처합니다. /docs 자체(세그먼트 0개)도 매칭됩니다.

/docs/docs/api/docs/api/reference/hooks
← 스터디로 돌아가기

핵심 파일 코드

// demo/nextjs/16.1.6/project-structure/dynamic-routes/page.tsx
app/blog/[slug]/page.tsx      // 단일 세그먼트
app/shop/[...slug]/page.tsx   // 1개 이상 세그먼트
app/docs/[[...slug]]/page.tsx // 0개 이상 세그먼트

const { slug } = await params
// [slug]         -> slug: string
// [...slug]      -> slug: string[]
// [[...slug]]    -> slug: string[] | undefined