Next.js
/Advanced
Catch-All Routes
Definition
An extension of dynamic routes using an ellipsis `[...param]` that captures an array of nested URL segments, rather than just one.
Explain Like I'm New
A standard dynamic route `[id]` only catches ONE slash (e.g. `/shop/shirts`). A catch-all route `[...categories]` catches infinite slashes (e.g. `/shop/mens/shirts/summer/red`). It gathers all those words into an array and hands them to you.
Real World Example
Creating a complex e-commerce filtering system or a documentation site where the URL depth varies wildly (`/docs/react/hooks/useState`).
Common Use Cases
- •Documentation viewers
- •Complex nested taxonomies
Interactive Example
/* File Path: app/docs/[...slug]/page.tsx URL Visited: mywebsite.com/docs/api/v2/authentication */ export default function DocsPage({ params }: { params: { slug: string[] } }) { // params.slug is an ARRAY of all the URL segments! // params.slug = ["api", "v2", "authentication"] const section = params.slug[0]; // "api" const version = params.slug[1]; // "v2" const topic = params.slug[2]; // "authentication" return <h1>Viewing documentation for: {topic}</h1> }
Interview Questions
basic
- What syntax is used to create a catch-all route folder?
intermediate
- What is the difference between `[...slug]` and `[[...slug]]` (double brackets)?