Catch-all Routes ([...slug])

Capturing infinitely nested URL segments into an array.

Next.js5 min readConcept 15 of 65

The spread syntax

Sometimes you need a route to match an unpredictable number of URL segments. For example, a documentation site where a page might be at /docs/intro or /docs/advanced/routing/intercepting.

You can achieve this by adding the JavaScript spread operator ... inside the brackets of a dynamic route: app/docs/[...slug]/page.tsx.

Slashes to Arrays

When a user hits a Catch-all route, Next.js splits the URL path by its slashes and passes the result as an Array.

If the route is /docs/a/b/c, the extracted parameter will be slug: ['a', 'b', 'c']. You can then use this array to traverse your CMS or markdown files to find the correct content.

Handling the array

In Next.js 15, params is a Promise. You must await it just like a normal dynamic route.

Once awaited, you often join the array back together: const path = (await params).slug.join('/'); to query your database.

Array Extraction

Type a deeply nested URL into the browser bar. Watch how Next.js takes the slashes, splits the string, and injects a JavaScript array into the page component.

/shop/
["clothes","tops","t-shirts"]
404 - Not Found
Catch-all routes require at least
one segment to match.
app/shop/[...slug]/page.tsx
export default async function Page({ params }) {
// slug is guaranteed to be an Array here
const { slug["clothes", "tops", "t-shirts"] } = await params;
// Generate breadcrumbs
Breadcrumbs
HomeShop
}

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1If your folder is app/shop/[...path]/page.tsx, and a user visits /shop/clothes/shirts, what does the awaited params object look like?
  2. 2Given app/docs/[...slug]/page.tsx, what happens if a user navigates to exactly /docs?

Remember this

  • Use [...name] to capture an infinite number of nested path segments.
  • The extracted value is always an **Array** of strings.
  • A standard catch-all route will **404** if there are no segments provided.
  • In Next.js 15, you must still await the params Promise before accessing the array.

Done with this concept?

Mark it complete to track your progress. No login needed.