Different slug names for the same dynamic path

Feature request

Is your feature request related to a problem? Please describe.

Yes. I have an user case that makes sense have two or more dinamic routes in the same folder.

A clear and concise description of what you want and what your use case is.

When we use dynamic routes we cant use different slug names for the same dynamic path as it throws the error 'You cannot use different slug names for the same dynamic path.'.

Example: This works:

This dont (throws the error on yarn dev):

The difference between both is that on second example I have 2 dinamic paths inside [city] ([valuezone] and [neighborhood]) and on first I have only [valuezone].

The point is that the valuezone is our bussiness name to a group of neighborhoods and we have some neighborhoods under our valuezone and some out of it. So, we have 2 types of url.

The neighborhood is under a mapped valuezone /comprar/[realtyType]/[state]/[city]/[valuezone]/[neighborhood]
The neighborhood wont have a mapped valuezone /comprar/[realtyType]/[state]/[city]/[neighborhood]

To archieve the behavior I need to add both [valuezone] and [neighborhood] under [city], but this throws the error I describe above.

Describe the solution you’d like

It would be awesome if we could use thing like the second image, as we redirect especifying the path and the variables we want, that dont leaves doubts of what path we want to render.

Describe alternatives you’ve considered

In my especific case if I just change the order of [neighborhood] and [valuezone] the problem is solved, but this only works because I have only one conditional path, in other user cases I cant see an solution with friendly URL.

Issue Analytics

State:
Created 4 years ago
Reactions:8
Comments:16 (5 by maintainers)

Top GitHub Comments

12reactions

flybayercommented, May 18, 2020

This is a pretty rough limitation.

We’re trying to use a restful style page structure as shown below, but this fails.

└── projects
    ├── [id]
    │   └── edit.tsx
    ├── [id].tsx
    ├── [projectId]
    │   └── tasks
    │       ├── [id]
    │       │   └── edit.tsx
    │       ├── [id].tsx
    │       ├── index.tsx
    │       └── new.tsx
    ├── index.tsx
    └── new.tsx

Supporting this definitely requires more complexity inside the Next router and a compile step check to ensure duplicate pages don’t exist (ex. projects/[id]/edit and projects/[projectId]/edit). But I do think it’s worth the effort.

9reactions

matigdacommented, Apr 24, 2020

@lfades is there any progress on that? Also I got the error from the title even when my structure looks like this:

root
    [productPage].js
    [category]
               [categoryName].js

It’s not very convenient. I know it’s the same case as from the author.

I would understand that, if [productPage] would match something like /xxx/yyy, but it’s not. This url matches only [category]/[categoryName].js file.

Top Results From Across the Web

You cannot use different slug names for the same dynamic ...

Now I'm coming across a use case where I need the above route exactly the same except the last parameter of [location_id] ,...

You cannot use different slug names for the same dynamic ...

[Solved]-You cannot use different slug names for the same dynamic path Nextjs-Reactjs ... The two routes you have provided are exactly equivalent and...

Dynamic Routes - Next.js

Multiple dynamic route segments work the same way. The page pages/post/[pid]/[comment].js ... Note: You can use names other than slug , such as:...

Client-Side Routing In Next.js - Smashing Magazine

This is an error // Failed to reload dynamic routes: Error: You cannot use different slug names for the // same dynamic path...

NextJS Project Tutorial - Dynamic Routing, Route Segment, Slug

Hi Everyone,In this NextJS Project Tutorial Video We will be discussing dynamic route, different route segment and slug.