What are catch-all segments and what is its use?

Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets [...folderName]. For example, app/shop/[...slug]/page.js will match /shop/clothes, but also /shop/clothes/tops, /shop/clothes/tops/t-shirts, and so on.

Use cases:

1
They are useful wherever we want to handle different url with same logic
2
They are useful for nested routes, wildcard routes, and flexible URL structures.
3
Use optional catch-all segments ([[...slug]]) to match both the root and nested paths.

Difficulty: 5/10

Topics: dynamic routing, catch-all routes, optional catch-all

Scenario Questions

0-2 years experience

1
How would you create a page in Next.js that matches any URL under /docs/* and renders the same component?
2
If you have a file named pages/[...slug].js, what URL paths will it match, and how can you access the captured segments inside the component?
3
What happens when you navigate to /docs without any additional segment—does the catch‑all route fire, and how would you handle that case?

2-5 years experience

1
You need to build a blog where each post can be nested under multiple categories, like /tech/react/hooks. Explain how you'd set up the routing using catch‑all segments and what trade‑offs you consider for static generation versus server‑side rendering.
2
During a deployment you notice that a request to /api/users/123/profile is hitting a catch‑all API route you didn't intend. How would you debug why the route matched and fix it?
3
Why might a catch‑all route cause a 404 for a specific path, and how would you adjust the file structure to resolve it?

5-8 years experience

1
Design a scalable content platform that uses optional catch‑all routes to serve both top‑level pages and deep‑link URLs while keeping build times low. Discuss how you’d decide which pages to pre‑render versus using fallback.
2
Explain the performance implications of using a catch‑all segment with getStaticPaths and fallback: 'blocking' versus 'true' on a high‑traffic site.
3
How would you structure your Next.js project to avoid route conflicts when multiple teams need catch‑all routes for different sections of the site?

8+ years experience

1
Your organization is migrating a monolithic site to a micro‑frontend architecture using Next.js. Several teams need overlapping catch‑all routes. How would you design a routing strategy and shared conventions to prevent collisions and maintain long‑term maintainability?
2
Consider a legacy system where URLs are stored in a database and can be arbitrarily deep. Propose an approach using optional catch‑all routes, edge caching, and incremental static regeneration to serve these pages efficiently while supporting frequent content updates.
3
What are the risks of overusing catch‑all routes in a large Next.js application, and how would you set governance policies to mitigate them?

Follow-up Questions

❓How does Next.js differentiate between a required and an optional catch‑all segment?
❓What impact does a catch‑all route have on static generation and fallback behavior?
❓Can you describe a scenario where using a catch‑all could cause unintended route matches?