search

vercel / next.js

The React Framework
https://nextjs.org
MIT License
124.68k stars 26.61k forks source link

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

Open emil-wearealldigital opened 3 years ago

emil-wearealldigital commented 3 years ago

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

emil-wearealldigital commented 3 years ago

Update for Next.js 11

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

image

AntoineBourin commented 2 years ago

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

emil-wearealldigital commented 2 years ago

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 commented 2 years ago

sounds like a duplicate of an older bug https://github.com/vercel/next.js/issues/21210

workaround via redirects possible: https://github.com/vercel/next.js/issues/31420#issuecomment-976227930

ghost commented 2 years ago

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;