When trailingSlash: true, createLocalizedNavigation doesn't work properly

[Micu22]

Description

The language switcher doesn't work on homepage when trailingSlash is set to true in next.config.js

Also, the pathnames param sent to the createLocalizedPathnamesNavigation() function, has to have no-trailing slash, to work regardless of the trailingSlash setting in next.config.js. This is just ok, just annoying, maybe it can be fixed alongside the homepage problem.

Mandatory reproduction URL (CodeSandbox or GitHub repository)

https://github.com/amannn/next-intl/tree/main/examples/example-app-router

Reproduction description

Steps to reproduce:

1. Install the example-app-router
2. set trailingSlash to true in next.config.js
3. open homepage and switch the language

Expected behaviour

Setting trailingSlash to true, should keep all translation mechanisms intact.

[amannn]

The language switcher doesn't work on homepage when trailingSlash is set to true in next.config.js

For me this works without an issue. Can you submit a reproduction that shows the error?

[github-actions]

Thank you for your report.

Unfortunately, the reproduction is missing or incomplete, and as such we cannot investigate this issue. Please add a reproduction to the issue, otherwise it will be closed automatically.

Templates:

• CodeSandbox (App Router)
• CodeSandbox (Pages Router)

Creating a good bug report takes time.

To help us resolve the issue quickly, please simplify the reproduction as much as possible by removing any unnecessary code, files, and dependencies that are not directly related to the problem. The easier it is for us to see the issue, the faster we can help you.

Apart from the reproduction, make sure to include the precise steps on how to reproduce the issue, e.g.:

1. Open reproduction
2. Click on …
3. See error: …

Thank you for your understanding!

FAQ

"I've included a reproduction, what is missing?"

This comment might have been added because your reproduction doesn't point to either a CodeSandbox or a public GitHub repository where the issue can be reproduced.

Please make sure:

1. If you've linked to a CodeSandbox, make sure to save the latest changes.
2. If you've linked to a GitHub repository, make sure that you've committed and pushed the latest changes.
3. Linking to other resources, e.g. to the docs, unfortunately doesn't help to reproduce your issue.

[Micu22]

Link to CodeSandbox

When moving this to codesandbox I somehow can only reproduce half of the problem which are the trailing slashes in the config file. The homepage error doesn't happen there.
Still, it would be nice to have an error in console for the config/pathnames error.
The error could say, include links without the trailingslash for createLocalizedPathnamesNavigation(), even if you have trailingSlash enabled in your next config.

Let me know if you can open the codesandbox, it's my first time using it

[amannn]

I can access the CSB, yes!

I can see these errors:

• The German link renders as http://localhost:3000/de/pathnames/ (should be /de/pfadnamen, seems to be a problem in the Link component)
• http://localhost:3000/de/pfadnamen/ is a 404 (seems to be a problem in the middleware)

Are these the ones which you are seeing too?

Generally, maybe we could adapt the internal handling to work both with trailing slashes and without.

If you're interested in working on a fix, here's the relevant code:

• Tests for createLocalizedPathnamesNavigation
• Implementation for createLocalizedPathnamesNavigation
• Relevant handling in the middleware
• Tests for the middleware

Also see the contributors guide.

[vordgi]

@amannn Hello!

I noticed a problem for navigation with this: the localized path is taken from the object by the key (current pathname). The current pathname is a pathname without a slash at the end (/pathnames). In the object, the keys can indicate with a slash at the end (/pathnames/).

There are several ways to solve this:

Check if trailing slash is included and if yes - make pathname with a slash at the end, if not - without. The downside here is that the user is limited by this and needs to know this detail.

Ignore this issue and write in the doc that all keys must be without a slash at the end (except for the root page)

Bring the object of localized pathnames and current pathname to one form - f.e. without a slash at the end (current pathname /pathname, and process pathnames: {'/pathnames/': '/something/'} -> {'/pathnames': '/something/'}). The problem here is that after processing, you still need to control the trailing slash and configure it in the final path. Otherwise, unnecessary redirects may appear.