Why Catch-all API routes in NextJS? - Purpose & Use Cases

The Big Idea

Discover how one file can replace dozens and keep your API neat and powerful!

The Scenario

Imagine building an API where you must create a separate file for every possible URL path your app might receive, like /api/user, /api/user/profile, /api/user/profile/settings, and so on.

The Problem

Manually creating many files for each URL path is slow, confusing, and hard to maintain. It's easy to make mistakes and miss paths, leading to broken or inconsistent API behavior.

The Solution

Catch-all API routes let you handle many URL paths with a single file. This means you write one flexible handler that can respond to any nested path, making your code simpler and easier to manage.

Before vs After

✗ Before

pages/api/user.js
pages/api/user/profile.js
pages/api/user/profile/settings.js

✓ After

pages/api/[...slug].js
// One file handles /user, /user/profile, /user/profile/settings, etc.

What It Enables

It enables building scalable APIs that adapt to many URL patterns without extra files or complex routing logic.

Real Life Example

Think of a blog where posts have categories and subcategories. Instead of making a file for each category path, a catch-all route handles all post URLs dynamically.

Key Takeaways

Manually creating many API files is tedious and error-prone.

Catch-all routes let one file handle many URL paths.

This simplifies API code and makes it easier to scale.