CODEWITHSUNDEEP
next.jsurl-routing
GrayHat
GrayHat

Reputation: 149

Next.js catch-all routes for nested structure

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

Upvotes: 4

Views: 5213

Answers (1)

juliomalves
juliomalves

Reputation: 50278

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

Upvotes: 3

Related Questions