Overview

Catch-all routes allow you to match multiple URL segments in a single route. They are defined using the [...name] syntax, where the parameter becomes an array of the matched segments.

What are Catch-All Routes?

Catch-all routes are a powerful feature that allows you to match any number of URL segments after a specific path. They are defined using the [...name] syntax in folder or file names.

Key Characteristics

• Matches multiple segments: Any number of URL segments after the parent path
• Array parameter: The parameter becomes an array of all matched segments
• Lower priority: Static and dynamic routes are matched first
• Optional version: Use [[...name]] for optional catch-all

In this example, /docs/getting-started matches with slug = ['getting-started'], while /docs/guides/routing/basics matches with slug = ['guides', 'routing', 'basics'].

Basic Usage

Create a catch-all route by naming a folder or file with square brackets and three dots: [...name].

Catch-All Examples

The route will match any URL that starts with the parent path and has at least one segment. This is different from optional catch-all routes, which match even with zero segments.

Accessing Parameters

Use useParams() (auto-imported) to access the catch-all parameter as an array. The parameter name becomes a property on the params object.

Basic Access

// src/app/docs/[...slug]/page.tsx
export default function DocsPage() {
  const { slug } = useParams()
  // slug is an array of the URL segments
  
  return (
    <div>
      <h1 className="text-2xl font-bold text-white">Documentation</h1>
      <p className="text-slate-400">Path: {slug?.join(' / ')}</p>
      <p className="text-slate-400">Depth: {slug?.length || 0}</p>
    </div>
  )
}

With Data Fetching

// src/app/blog/[...slug]/page.tsx
export default function BlogArchive() {
  const { slug } = useParams()
  const [posts, setPosts] = useState([])
  
  useEffect(() => {
    // Fetch posts based on the path segments
    const path = slug?.join('/')
    fetchPosts(path).then(setPosts)
  }, [slug])
  
  return (
    <div>
      <h1 className="text-2xl font-bold text-white">
        Archive: {slug?.join(' / ') || 'Home'}
      </h1>
      <div className="space-y-2">
        {posts.map(post => (
          <div key={post.id} className="p-4 bg-slate-900/50 rounded">
            <h2 className="text-white font-medium">{post.title}</h2>
          </div>
        ))}
      </div>
    </div>
  )
}

Nested Catch-All Routes

Catch-all routes can be combined with other dynamic and static segments to create complex routing patterns.

Combining with Dynamic Segments

// src/app/products/[category]/[...slug]/page.tsx
export default function ProductPage() {
  const { category, slug } = useParams()
  
  return (
    <div>
      <h1 className="text-2xl font-bold text-white">Category: {category}</h1>
      <p className="text-slate-400">Path: {slug?.join(' / ')}</p>
      <p className="text-slate-400">Segments: {slug?.length || 0}</p>
    </div>
  )
}

Optional Catch-All Routes

Use [[...name]] to make the catch-all optional. The route will match both the parent path and any nested paths.

Optional Catch-All Example

// src/app/shop/[[...slug]]/page.tsx
export default function ShopPage() {
  const { slug } = useParams()
  
  if (!slug || slug.length === 0) {
    return (
      <div>
        <h1 className="text-2xl font-bold text-white">Shop Home</h1>
        <p className="text-slate-400">Browse all categories</p>
      </div>
    )
  }
  
  return (
    <div>
      <h1 className="text-2xl font-bold text-white">
        Category: {slug.join(' / ')}
      </h1>
      <p className="text-slate-400">Depth: {slug.length}</p>
    </div>
  )
}

File-Based Catch-All Routes

Catch-all routes can also be defined as flat files without folders. This reduces folder nesting for simpler use cases.

Flat File Examples

// src/app/blog/[...slug].tsx
export default function BlogArchive() {
  const { slug } = useParams()
  
  return (
    <div>
      <h1 className="text-2xl font-bold text-white">Blog Archive</h1>
      <p className="text-slate-400">Path: {slug?.join(' / ')}</p>
    </div>
  )
}

Route Priority

Catch-all routes have lower priority than static routes and dynamic single segments. The router resolves matches in this order:

Priority Example

Consider this folder structure with overlapping routes:

This priority system ensures predictable routing behavior and prevents conflicts between different route types.

Use Cases

Catch-all routes are ideal for:

Additional Use Cases

• CMS Content: Content pages with flexible URL structures
• API Versioning: API routes with version segments like /api/v1/users/123
• File Browser: Directory browsing with arbitrary depth
• Wiki Pages: Multi-level wiki documentation
• Path-Based Navigation: Any URL structure where depth varies

Complete Example

Here is a comprehensive example showing all catch-all route patterns in a real-world application:

Route Mapping