Translate page names (URLs)

[SteveMelons]

A way to reliably translate page names (URLs)?

Example:

// next.config.js
module.exports = {
  i18n: {
    locales: ["en", "de"],
    defaultLocale: "en",
  },
};

Needed behavior:

/contact -> /contact
/de/contact -> /de/kontakt

The only two sources of discussion I have found are:

• Internationalized routing with translation of pages names vercel/next.js#18485
• https://stackoverflow.com/questions/64882168/next-js-10-i18n-different-page-names

The problems I am facing are:

1. If you use rewrites() in next.config.js then translating the href of a link depending on the locale works and redirects to the correct page but shows the translated URL:

   // next.config.js
   module.exports = {
     i18n: {
       locales: ["en", "de"],
       defaultLocale: "en",
     },
     async rewrites() {
       return [
         {
           source: "/de/kontakt",
           destination: "/de/contact",
           locale: false,
         },
       ];
     },
   };

   <Link href={t("contact-href")}>
     {t("contact-href-name")}
   </Link>

   The problem occurs when you are already on the page /de/kontakt and then switch the locale to en. You will be redirected to /kontakt which leads to a 404, since it should be /contact.
   I also don't see a way of using redirect() to solve this problem in a multi locale web app.

2. If you go with the solution of changing the URL client side using the browser API, it will not affect the page name (URL) for search engine crawling. The main point of page name translation is SEO.

Any help would be appreciated. I also believe that this could be an important discussion that should make its way into the docs once a viable solution is found.

[srcnalt]

Hi @SteveMelons, I was tackling exactly the same issue trying to design my blog. It was quite a headache. I looked for other translation libraries as well but could not find any that supports this.

Finally I decided to investigate how this was done in popular multi-language websites. It appears they all have page conntext translated but the urls. I also checked some non-English local websites from different countries/languages and they all have the url's in their language only (naturally).

Which made me think, if you are going to go local use local names for pages. Otherwise use English page names.
I realized as a developer it bugged me a lot not seeing the urls localized but I never cared for this in any other website when I was sharing urls, probably does other people.

[isaachinman]

In general, I have found that the best way to achieve localised URLs is via dynamic routes, and optionally getStaticPaths.

vercel/next.js#10651 (comment)