Different slug names for the same dynamic path

[Alecell]

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.

1) The neighborhood is under a mapped valuezone /comprar/[realtyType]/[state]/[city]/[valuezone]/[neighborhood]

2) 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.

[lfades]

The issue in the second example is that you have 2 dynamic routes in the same level, [valuezone] and [neighborhood] can't be in the same level, because a dynamic route will always handle all routes that aren't handled by a static page, so if you have 2, it creates a conflict.

If what you want is to handle the following paths:

• /comprar/[realtyType]/[state]/[city]/[valuezone]/[neighborhood]
• /comprar/[realtyType]/[state]/[city]/[neighborhood]

You only need to have [valuezone] and remove [neighborhood], then to handle the paths:

• /comprar/[realtyType]/[state]/[city]/[valuezone]/[neighborhood] - Handled by [valuezone]/[neighborhood]/index.js
• /comprar/[realtyType]/[state]/[city]/[valuezone] - In this case instead of having [neighborhood] we have [valuezone], so you can consider [valuezone]/index.js to be the [neighborhood] page.

I'm closing the issue for now, feel free to continue the conversation.

[BramDecuypere]

@lfades And how would you go about this structure. Because I have the feeling I need different routes at the same level. Or I'm missing the point of some specs in Next.js

/[lang]/[overview] --> Which will give me an overview of the products with different routes in different languages. Would result in the following 3 routes (or even multiple in the future as we expand).

/nl/leasing-auto
/fr/leasing-voiture
/en/leasing-car

/[lang]/[about] --> will give me different slugs of the about page. I tried multiple things, but these are easy to happen in bigger application, no?

/nl/over-ons
/fr/a-propos-de-nous
/en/about-us

How would you deal with this situation?

I feel pretty limited by the api at the moment if there is no way to handle this. Also nice to note, it is about a static generated site. So don't know if that would change the way you would handle it.

[carylaw]

@lfades how about

/creditcard/[token] POST /creditcard/[cardId] DELETE

using same level but different method?

[lfades]

@carylaw You can use a single API route and check for the method with a conditional:

export default (req, res) => {
  if (req.method === 'POST') {
    // Process a POST request
  } else {
    // Handle any other HTTP method
  }
}

[lfades]

@BramDecuypere I currently don't have an answer for your use case, but the team knows about it and we'll be investing into i18n soon :+1:

[matigda]

@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.

[flybayer]

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.

[advancingu]

@BramDecuypere I currently don't have an answer for your use case, but the team knows about it and we'll be investing into i18n soon +1

Any news on this? Running into the same issue where route strings need to be localized.

[BramDecuypere]

@BramDecuypere I currently don't have an answer for your use case, but the team knows about it and we'll be investing into i18n soon +1

Any news on this? Running into the same issue where route strings need to be localized.

We currently decided not to localize our URL's although not perfect, it's not worth for us spending more time on these issues. What we do now though (for blogs at least), is have them come from our CMS and store the alternate links of the blogs inside the page as well. So we know there is always a link we can refer too.

Maybe that might help, we could also do that for the other pages, now that I think of it, but like I said, not worth my time right now. I believe Next is working on a build in solution, so I would hate to spend time working around the issue and then have them release a standardized feature out of the box...

Best of luck anyways!

[AurelianSpodarec]

Another question.

Imagine you're building a blog. You have blog that displays all the blog posts, and that would be domain.com/blog. Now, each post has a category, so you could click domain.com/blog/business and it would fetch the posts only with business.

They both use the same template, and the single post view, would be always domain.com/blog/category/slug no matter where it is, whether on blog or blog/category. They both, use same template.

How would you go about that?

[kylekirkby]

Any update on this? Seems pretty bad that we can't handle localized routes... @timneutkens @lfades

Why is this structure not supported? Seems completely logical. Without this, no localized routes??

[BramDecuypere]

@lfades Just here to let you know we still don't have a solution for this case? Same for a page that only needs to be rendered in one language?

[vikaskhunteta]

in WordPress both posts and pages execute from same path, for e.g. site.com/page or site.com/post even archive pages too execute from same path for e.g. site.com/blog which lists all posts or site.com/category which would list all posts of particular category.

I don't want to create different routes or don't want to use query parameters, what I want is when a Link component href attribute has [...post] dynamic route it should call [...post].js file in the root, when href has [...page] dynamic route it must call [...page].js file not [....post].js and same for category route, when Link has [...category] href it should call [...category].js file, does this make sense?

[vadimcasap]

in WordPress both posts and pages execute from the same path, for e.g. site.com/page or site.com/post even archive pages to execute from the same path for e.g. site.com/blog which lists all posts or site.com/category which would list all posts of a particular category.

I don't want to create different routes or don't want to use query parameters, what I want is when a Link component href attribute has [...post] dynamic route it should call [...post].js file in the root when href has [...page] dynamic route it must call [...page].js file not [....post].js and same for category route when Link has [...category] href it should call [...category].js file, does this make sense?

So first of all let's take in mind that WordPress routing works/points in the same place (index.php) and also need to take in mind that adding new post or page (which initial was the same) are selected by query to the database,

So when you have a slug and check to the database into posts table and found it WordPress understands that a post was found and loads the single-post.php overwise if a page with that slug is found then it loads the single-page.php.

You can use the same logic in your project but for this, you will need to have a single component and to make differentiation by logic, and I guess it's not a good practice to do it in this way.

[wellitongervickas]

@Alecell have you tried this approach?

• pages -- transactions ---- [...type].ts (will match any route /transactions/*/*/**.....) ---- [uuid].ts (will match only /transactions/uuid)

as we saw below, we can match these values using query params. But taking a look into the documentation, there are many caveats

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.