Mastering Catch-All & Optional Catch-All Routes in Next.js ([...slug] & [[...slug]])

Catch-All & Optional Catch-All Routes in Next.js

[...slug].js vs [[...slug]].js — the 2025 Guide

Dynamic routing is one of the super-powers that makes Next.js feel effortless. But what happens when you can’t predict how many path segments a URL will have—or whether it will have any at all? Enter catch-all and optional catch-all routes.

1 | What exactly is a “catch-all” route?

A catch-all segment matches “this segment plus anything that follows.”
You declare it by adding an ellipsis inside the brackets:

pages/shop/[...slug].js          # Pages Router
app/shop/[...slug]/page.js       # App Router (v13+)

So /shop/clothes, /shop/clothes/tops/t-shirts, or any deeper path will all resolve to the same page. The param arrives as an array:

// Pages Router example
export default function Page({ params }) {
  const { slug } = params;          // ['clothes', 'tops', 't-shirts']
}

Official docs example ➜ Next.js

2 | And what’s an optional catch-all?

Sometimes you want the base route to resolve as well (/shop and deeper paths). Wrap the segment in double brackets:

pages/shop/[[...slug]].js         # Matches /shop  ✅
app/shop/[[...slug]]/page.js      # App Router equivalent

If no extra path is present, slug is undefined, otherwise it’s an array.
Docs illustration ➜ Next.jsNext.js

3 | Pages Router vs App Router syntax

Both routers pass the captured parts as arrays (string[])—the only difference is the file-system location and the data-fetching helpers you use.

4 | Data fetching for deep URLs

Static generation tips

1. Return one object per full path in getStaticPaths/generateStaticParams.

2. For huge site-maps, set fallback: 'blocking' (Pages) or dynamicParams: true (App) so uncommon paths are rendered on demand and then cached.

3. Don’t forget to revalidate when content can change.

5 | Linking & Navigation

import Link from 'next/link';

<Link href={`/shop/${['clothes', 'tops'].join('/')}`}>
  Browse Tops
</Link>

Next.js pre-fetches the bundle automatically, so even the deepest path feels instant.

6 | SEO & usability checklist

• Canonical URLs — compute them at render time so search engines understand each unique address.

• Breadcrumbs — split the slug array to build hierarchical navigation.

• Sitemaps — iterate over your CMS data or route manifest to produce XML; split large sitemaps into files of ≤ 50 k URLs.

• 404 clarity — fall back to a custom 404 page if the slug array doesn’t map to real content.

7 | Common pitfalls

8 | Real-world use-cases

1. Docs sites — /docs/intro, /docs/guides/deployment/aws.

2. CMS pages — marketers add nested slugs without touching code.

3. Multi-level categories — /shop/men/shirts/flannel.

4. User-generated paths — /u/jane/recipes/cakes/chocolate.

5. Funnel builders / A/B tests — optional segment shows default landing page when slug missing.

9 | Conclusion

Catch-all ([...slug]) and optional catch-all ([[...slug]]) routes turn a single component into a swiss-army knife that gracefully handles any depth of URL. Combine them with static generation helpers for speed, add smart guards for undefined params, and you’ll have a routing setup that scales from ten pages to a million—without ever touching a server config file.

Happy routing! 🚀

FAQS