Catch-All and Optional Catch-All Routes
Catch-all segments are useful when a route can contain an arbitrary number of path segments. [...slug] captures one or more segments, while [[...slug]] also allows the route to match without any segments.
Documentation systems are a classic example. A documentation page might be available at /docs/react/hooks/use-effect where the entire path after /docs is represented by a slug array.
Catch-All Documentation Route
export default async function DocsPage({
params
}: {
params: Promise<{ slug: string[] }>;
}) {
const { slug } = await params;
return <pre>{JSON.stringify(slug, null, 2)}</pre>;
}💡 A URL such as
/docs/react/hooks/use-effect produces an array containing each captured path segment.Key Takeaways
- Use
[...slug]when at least one segment is required. - Use
[[...slug]]when the entire segment is optional. - Catch-all routes are useful for documentation and hierarchical content.