Explain the difference between [slug], [...slug], and [[...slug]]. Give examples of URLs each would match.

Question

Accepted Answer

In Next.js dynamic routes, the number of brackets determines how many URL segments are captured. Single brackets `[slug]` capture exactly one segment; triple dots with brackets `[...slug]` (catch-all) capture one or more segments; and double brackets with triple dots `[[...slug]]` (optional catch-all) capture zero or more segments. These three syntaxes give you progressively more flexibility in handling variable-depth URLs, from fixed single segments to completely optional multi-segment paths. [slug] (Single bracket): Matches exactly one segment. Example: `/posts/hello-world` → `{ slug: 'hello-world' }` . [...slug] (Triple dot with brackets): Matches one or more segments. Example: `/docs/getting-started/installation` → `{ slug: ['getting-started', 'installation'] }` . [[...slug]] (Double brackets with triple dots): Matches zero or more segments. Example: `/` → `{ slug: undefined }` and `/docs/getting-started` → `{ slug: ['docs', 'getting-started'] }` . ``` app/ ├── posts/ │ └── [slug]/ # Matches /posts/hello-world │ └── page.tsx ├── docs/ │ └── [...slug]/ # Matches /docs/getting-started and /docs/api/reference │ └── page.tsx ├── about/ │ └── [[...slug]]/ # Matches /about, /about/team, /about/team/john │ └── page.tsx ``` The `[slug]` pattern is the most common and simplest dynamic route. It captures exactly one segment from the URL. This is perfect for routes like blog posts (`/posts/hello-world`), product pages (`/products/iphone-12`), or user profiles (`/users/john-doe`). The parameter is always a string, and the route will only match if there is exactly one segment in that position. If there are zero or more than one segments, it won't match . ```tsx // app/posts/[slug]/page.tsx export default async function PostPage({ params }: { params: { slug: string } }) { const { slug } = await params; return

Post: {slug}

; } // URL matches: // ✅ /posts/hello-world → { slug: 'hello-world' } // ✅ /posts/123 → { slug: '123' } // ❌ /posts → 404 (no segment) // ❌ /posts/hello-world/comments → 404 (too many segments) ``` The `[...slug]` pattern captures one or more segments from that point forward in the URL. The parameter becomes an array of strings, with each segment as an element. This is ideal for documentation sites, category hierarchies, or any route that needs to handle variable-depth paths. The route requires at least one segment—if there are zero, it won't match . ```tsx // app/docs/[...slug]/page.tsx export default async function DocsPage({ params }: { params: { slug: string[] } }) { const { slug } = await params; return

Docs path: {slug.join(' / ')}

; } // URL matches: // ✅ /docs/getting-started → { slug: ['getting-started'] } // ✅ /docs/api/reference → { slug: ['api', 'reference'] } // ✅ /docs/1/2/3/4/5 → { slug: ['1', '2', '3', '4', '5'] } // ❌ /docs → 404 (zero segments) // ❌ /docs/ (trailing slash) → 404 (zero segments) ``` The `[[...slug]]` pattern is the most flexible. It matches zero, one, or multiple segments. When there are no matching segments, the parameter becomes `undefined`. This is perfect for homepage variants, root-level catch-alls, or when you want the same page to handle both the base route and nested routes. The extra brackets make the entire segment optional . ```tsx // app/about/[[...slug]]/page.tsx export default async function AboutPage({ params }: { params: { slug?: string[] } }) { const { slug } = await params; if (!slug) { return

About Home

; } return

About subpage: {slug.join(' / ')}

; } // URL matches: // ✅ /about → { slug: undefined } // ✅ /about/team → { slug: ['team'] } // ✅ /about/team/john → { slug: ['team', 'john'] } // ✅ /about/team/john/bio → { slug: ['team', 'john', 'bio'] } // app/[[...slug]]/page.tsx (at root) // This would match homepage, blog, and everything else ``` The key difference between `[...slug]` and `[[...slug]]` is optionality. `[...slug]` always expects at least one segment—it's a required parameter. `[[...slug]]` makes the entire path segment optional, so it matches even when no segment is present. This distinction is crucial for root-level routing. For example, if you put `[[...slug]]` at your root app folder, it would match the homepage (`/`) as well as `/blog`, `/products`, etc., effectively overriding all other routes unless you're careful with ordering . For [slug]: `params: { slug: string }` — always a string . For [...slug]: `params: { slug: string[] }` — always an array with at least one element . For [[...slug]]: `params: { slug?: string[] }` — optional array, could be undefined . When using catch-all routes with other dynamic segments, be careful about route conflicts—more specific routes (like `/[id]`) should come before catch-a

Explain the difference between [slug], [...slug], and [[...slug]]. Give examples of URLs each would match.

[slug] matches exactly one segment, [...slug] matches one or more segments, and [[...slug]] matches zero or more segments, with each syntax providing different levels of flexibility for handling URL paths

Explain the difference between [slug], [...slug], and [[...slug]]. Give examples of URLs each would match.

[slug] matches exactly one segment, [...slug] matches one or more segments, and [[...slug]] matches zero or more segments, with each syntax providing different levels of flexibility for handling URL paths

Scenario Questions

Follow-up Questions