Next.js catch-all routes for nested structure

Question

I'm trying to implement route e.g /page/news/title/tab and following folder struture for it, but I got the error: You cannot define a route with the same specificity as a optional catch-all route. So how to build folder structure in right way?

   pages/
    news/
     [[...rest]].js
     index.js
   index.js

Answer 1

The route news/index.js conflicts with news/[[...rest]].js because it's an optional catch all route.

Catch all routes can be made optional by including the parameter in double brackets ([[...slug]]).

For example, pages/post/[[...slug]].js will match /post, /post/a, /post/a/b, and so on.

The main difference between catch all and optional catch all routes is that with optional, the route without the parameter is also matched (/post in the example above).

---

You can either remove the news/index.js route, as the optional catch all route already matches it.

pages/
├─ news/
│   └─ [[...rest]].js
└─ index.js

Or, make the catch all route non-optional by including the parameter in single brackets ([...rest]).

pages/
├─ news/
│   ├─ [...rest].js
│   └─ index.js
└─ index.js