Why Catch-all routes with [...param] in NextJS? - Purpose & Use Cases

The Big Idea

What if one file could magically handle all your website's many URL paths?

The Scenario

Imagine building a website where users can visit many different pages with varying paths, like /blog/post1, /blog/post2/comments, or /shop/category/item/details. You try to create a separate route file for every possible URL manually.

The Problem

Manually creating a file for every possible URL is overwhelming and impossible to maintain. You end up with hundreds of files, and adding new nested paths means creating even more files. It's slow, confusing, and easy to make mistakes.

The Solution

Next.js catch-all routes with [...param] let you handle many URL patterns with a single file. This means one route file can catch all nested paths, making your code cleaner and easier to manage.

Before vs After

✗ Before

pages/blog/post1.js
pages/blog/post2.js
pages/blog/post2/comments.js

✓ After

pages/blog/[...slug].js

What It Enables

This lets you build flexible, scalable websites that handle any depth of URL paths without extra files or complex routing logic.

Real Life Example

Think of an online store where product pages can have different categories and filters in the URL. Using catch-all routes, one file can handle all these variations smoothly.

Key Takeaways

Manually creating many route files is hard and error-prone.

Catch-all routes with [...param] simplify routing by capturing many paths in one file.

This makes your app easier to build, maintain, and scale.