Next.js › Dynamic Routes & Catch-All Segments
What is a catch-all route segment, and when would you use one?
IntermediateAnswer
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.