Back to results for “Error Handling”
Next.js › Dynamic Routes & Catch-All Segments

What is a catch-all route segment, and when would you use one?

Intermediate

Answer

A catch-all segment, written with three dots inside brackets like [...slug], matches any number of URL segments after a certain point, capturing them as an array, which is useful for building things like nested category pages or a flexible content management system with arbitrarily deep URL structures.
// app/docs/[...slug]/page.js
export default async function DocsPage({ params }) {
  const { slug } = await params;
  // slug is an array, e.g. ['getting-started', 'installation']
  return <p>Viewing: {slug.join(' / ')}</p>;
}
Real-world example A documentation website uses a catch-all route to handle URLs of any depth, such as docs/getting-started/installation, all through a single flexible page template.

Common follow-ups: What is the difference between a catch-all segment and an optional catch-all segment?;How do you handle a completely invalid or missing slug in a catch-all route?