Catch-All Segments in Next.js

A catch-all segment allows a route to match multiple URL parts using a single dynamic folder. It captures all remaining segments as an array.

What is a Catch-All Segment?

It is created using three dots inside square brackets:[...slug]. This folder captures multiple path values.

app/
 └── docs/
     └── [...slug]/
         └── page.jsx

How does it work?

export default function DocsPage({ params }) {
  return <p>{JSON.stringify(params.slug)}</p>;
}

Visiting this URL:
/docs/react/hooks/useState
Produces:
[react, hooks, useState]

Why use Catch-All Segments?

They allow flexible nested routing without creating many folders.

• Documentation systems
• Nested categories
• File explorers

Real-World Example

A documentation website captures unlimited sections like:

• /docs/react/hooks
• /docs/nextjs/routing/dynamic

All handled by one catch-all route.

Interview Tip

Catch-all segments allow a single route to capture multiple dynamic path parts as an array using the [...segment] syntax.