Locale routing is broken on /{locale}/[param] if param is a locale

[ghost]

What version of Next.js are you using?

10.0.6 (Updated my report to 12.0.4)

What version of Node.js are you using?

14.15.0

What browser are you using?

Chrome

What operating system are you using?

Windows

How are you deploying your application?

next start

Describe the Bug

Having a localized dynamic route like /{locale}/[param] is broken when the provided [param] is a locale. This brings more bugs which I've provided examples for in the repository below.

Expected Behavior

Going to /{locale}/[param] should always point to [param].js and it shouldn't matter if [param] is a locale.

To Reproduce

1. Setup locales in next.config.js
2. Have a basic home page - index.js
3. Have a basic dynamic route page - [param].js
4. Go to /{locale}/{locale} (e.g. /de/fr) to reproduce the bug.

Edit: The examples below are not applicable to Next.js 12.

I've provided 2 more examples of a real life situation showing how the router breaks because of this:
Check the repository for example

The first one is mainly a routing bug - going forward and back shows unexpected pathnames.
The second one is more like a confusion after the previous issues - it just shows how it's possible to decorate the pathname in a wrong way (possibly not a bug).
Edit: I've added a 3rd example which really breaks the app. If you add SSR then it's possible to execute another component without rendering it.

[ghost]

Update for Next.js 11

I tested it on the newest release and it behaves differently but the bug is still present.

[AntoineBourin]

@emil-wearealldigital Did you find a workaround for this routing problem ? I found the same issue and this gave me some important SEO problems.

[ghost]

Update for Next.js 12

I tested it on the newest release and the bug is still present.

The good thing is that all my additional examples are obsolete. The router behaves better and it shows warnings for invalid usage.

[dmudro]

sounds like a duplicate of an older bug #21210

workaround via redirects possible: #31420 (comment)

[ghost]

Also see the same issue.

We have two locales en and cs and the following link is rendered on a page as <a href='/en/cs'> tag:

<Link href="/cs">Link to /en/cs page</Link>

So the initial rendering is correct.

But when I click the link, Next downloads serverside props for /cs page not for /en/cs and displays incorrect data.

Adding locale={router.locale} to doesn't fix the issue.

As a workaround we use following href rewrite for all 's:

const pathFirstPart = to.split('/')[1]
const href =  router.locales.includes(pathFirstPart) && pathFirstPart !== router.locale ? `/${router.locale}${to}` : to;