next-intl
next-intl copied to clipboard
amannn
Automatically prefer localized pathnames that are more specific
Description
When using localized pathnames and trying to access a page (/products/add) that is in the same folder as a dynamic page (/products/[productId]), the user is redirected to the dynamic page with the name of the static page as the param (productId = "add").
This however is fixable by ordering "/products/add" before "/products/[productId]" in the pathnames object.
If this behavior is the expected one and not something that's planned to be changed, I suggest this behavior to be stated in the documentation.
Mandatory reproduction URL
https://codesandbox.io/p/devbox/xenodochial-hodgkin-3wj7ll?file=%2Fapp%2F%5Blocale%5D%2Fpage.tsx%3A94%2C11
Reproduction description
Steps to reproduce:
- Open reproduction.
- Change locale to "es" in the URL.
- Click on "Agregar" Link.
- Get redirected to "/productos/[productId]" instead of "/productos/agregar"
Expected behaviour
- Open reproduction.
- Change locale to "es" in the URL.
- Click on "Agregar" Link.
- Get redirected to "/productos/agregar" instead of "/productos/[productId]"
Thanks for this report, that's a great point!
I wonder if next-intl could automatically do the right thing here, Next.js is certainly capable of that.
This would need some further research on how routes can be ordered in a meaningful way. If I'm not mistaken, this is how Next.js does it: sorted-routes.ts. There's another related note in normalize-catchall-routes.ts.
And this is where we need to apply it in next-intl:
https://github.com/amannn/next-intl/blob/419a9cea2817949b65b1af9724927b95d7d3bf01/packages/next-intl/src/middleware/utils.tsx#L21
I'll add a note about this to the docs for the time being but would be open to reviewing a PR here in case someone is interested in diving deeper into this.
@amannn I could take a look at this when I get the chance and open a PR if no one is already working on it 🙂.
