Next internationalized routing allows multiple locales in url path

[JabobKrauskopf]

What version of Next.js are you using?

11.0.1 and 12.0.0

What version of Node.js are you using?

14.18.1

What browser are you using?

Firefox, Chrome

What operating system are you using?

macOS

How are you deploying your application?

next dev

Describe the Bug

When adding internationalized routing to a Next.js app, multiple subpaths redirect to the same route.
If for example I use the "en" locale as the defaultLocale, the following urls route to the same index page:

• http://localhost:3000
• http://localhost:3000/en
• http://localhost:3000/en/en
• http://localhost:3000/[anyOtherLocaleInNextConfig]/en

The router object for the http://localhost:3000/en/en option looks similar to this:
{ "pathname": "/", "route": "/", "query": {}, "asPath": "/en", "components": { "/": { "initial": true, "props": { "pageProps": {} } }, "/_app": { "styleSheets": [] } }, "isFallback": false, "basePath": "", "locale": "en", "locales": [ "de", "en", "us" ], "defaultLocale": "en", "isReady": true, "isPreview": false, "isLocaleDomain": false, "events": {} }

This causes problems when using slugs like http://localhost:3000/locale/[:slug] because the second /en in the http://localhost:3000/en/en url doesn't get detected as a slug. However using any string other than a locale defined in the next.config.js works just fine.

I hope this description is comprehensible - I've been banging my head against my desk for the past few days and might have lost one or two braincells.

Expected Behavior

When using slugs like http://localhost:3000/locale/[:slug], the second /en in localhost:3000/en/en should be detected as the slug.

To Reproduce

1. Setup a test repository using yarn create next-app --typescript
2. Add the following i18n config to the next.config.js: i18n: { defaultLocale: "en", locales: ["en", "de", "us"] },
3. Start the development server using yarn dev
4. Visit http://localhost:3000/en/en, http://localhost:3000/en, http://localhost:3000 and see the exact same page
5. Add a [slug] to the pages folder and create an index file in the [slug] folder
6. You can access the page using http://localhost:3000/en/test but not using http://localhost:3000/en/en, http://localhost:3000/en/de or http://localhost:3000/en/us
7. You can also acces the page using e.g. http://localhost:3000/en/en/test which then redirects to just http://localhost:3000/en/test

[stefanprobst]

possible duplicate of #31228, which should be fixed in v12.0.4-canary.5 - can you try with the latest canary version?

[JabobKrauskopf]

Thanks for the quick answer!

12.0.4-canary.5 seems to fix part of the problem (as described in the issue you mentioned)! However when I use a slug like http://localhost:3000/locale/[:slug] http://localhost:3000/en/en now throws the incompatible href as error even though I would except the second /en to be interpreted as the slug. http://localhost:3000/en/teststill works fine

[dmudro]

Not fixed in 12.0.4. I can still access http://localhost:3000/en/en or http://localhost:3000/en/de etc. as described in #31228 and #20120

[vordgi]

I think there must be an error message.

Next will redirect from /default-locale/dynamic-route to /dynamic-route. That's mean, that from /en/en you will redirect to /en. After reload at this path will be home page (which will redirect again - to /). (after fix)

I don’t know which solution would be correct here. If you have some ideas, it will be interesting for me to try to implement them. But now - in the root pages directory the pages should return an error (404) for dynamic routes with locales as slug.

Maybe good solution here is redirect to homepage, but to which locale - first or last?

If you use getStatisProps or gerServerSideProps, you can add this code for disabling this pages:

if (locales.includes(params.post)) {
  return {
    notFound: true,
  }
}

for redirect to home page:

export const getServerSideProps = ({ params, locale, defaultLocale, locales }) => {
  if (locales.includes(params.post)) {
    return {
      redirect: {
        destination: locale === defaultLocale ? '/' : `/${locale}`,
        permanent: false,
      },
    }
  }
  return {props: {}}
}

---

Before my fix at:
en/en was the home page
en/en-US was the home page with en-US locale

[vordgi]

Also for redirects you can add the following code to next.config.js:

const locales = ['en', 'nl', ...]

module.exports = {
  ...
  async redirects() {
    return [
      {
        source: `/:locale(${locales.join('|')})/:localeAsSlug(${locales.join('|')})`,
        destination: '/:locale',
        permanent: false,
        locale: false,
      },
    ]
  },
  ...
}

But it will redirect twice for default locales: /default-locale/default-locale -> /default-locale -> /

[dmudro]

that from /en/en you will redirect to /en

That's my fix at the moment too, easiest to write a quick redirect in vercel.json if you host there:

{
  "redirects": [
    { "source": "/en/en/:path*", "destination": "/en/:path" },
  ]
}

This is just a temp fix until it's fixed in the framework (been waiting for a year now...). Correct behaviour should be 404.

[balazsorban44]

Probably related to #21210