How to translate routes with NextJS and next-i18next?

Question

I'm building a multiple language website with next.JS and the package next-i18next. It's going well, except one thing that I'm not sure what's the best approach. I want that my static routes will be translated too (not only the page content), for example:

example.com/en/home -> example.com/pt-br/inicio

example.com/en/contact -> example.com/pt-br/contato

I know I could create the directories (en/pt-br) and insert the pages inside of them (eg: home.js, contact.js etc inside "/en/" and inicio.js, contato.js etc inside "/pt-br/"), like this would be easy to define the language when the user access any of those pages, but I'd need to create 2 files with almost all the same content (eg: "/en/home" and "/pt-br/inicio"). So I'm wondering if there is any better solution for this?

Thanks!

The only possible way I can think of is using `next-routes` with next-i18next. — Allen Wong, Dec 17 '20 at 12:01
Related: [How to setup i18n translated URL routes in Next.js?](https://stackoverflow.com/questions/68723485/how-to-setup-i18n-translated-url-routes-in-next-js). — juliomalves, Jun 26 '22 at 15:25
For app router and Next.js 13+: https://stackoverflow.com/a/76874385/3426730 — Branislav, Aug 10 '23 at 13:06

score 8 · Accepted Answer · answered Mar 01 '21 at 08:25

8

Instead of duplicating the same page for multiple languages, which hurts build performance & won't scale if you need to support more then 5 langs, you can use Next.js rewrites.

It was introduced in v9.5, and allows you to rewrite path to a specific page, in your example, you can create pages for the main lang, and all the secondary languages you can add support with rewrites. With a combination of i18n subpaths (which was introduced in v10) next will handle the locale part (/en/ / /pt-br/).

For example: your pages folder will contain 2 pages, home & contact.

// next.config.js

module.exports = {
  i18n: {
    locales: ['en', 'pt-br'],
    defaultLocale: 'en',
  },

  async rewrites() {
    return [
      {
        source: '/inicio', // automatically handles all locales
        destination: '/home', // automatically passes the locale on
      },
      {
        source: '/contato', 
        destination: '/contact', 
      }
    ]
  },
}

For more info check Rewrites with i18n support article.

answered Mar 01 '21 at 08:25

felixmosh

32,615
9
69
88

1

Thank you for your answer. As for the above answer, I will not have translated URLs. I don't want to create a subdomain for translations. I am looking for something where I can translate post's slug and render translated content :) – Prince Sodhi Mar 02 '21 at 14:56
There are 2 options of handling locale subpaths, subpath / subdomain... read the docs that I've added – felixmosh Mar 02 '21 at 15:11
I think I get it. Then do I need to create two files in the page folder? /about and /uber-uns – Prince Sodhi Mar 02 '21 at 15:17
No, this is the whole idea of `rewrites`, you rewrite a url (`source` filed) to a page (`destination` field)... – felixmosh Mar 02 '21 at 16:15
I feel I am following the right path. -> https://github.com/vercel/next.js/tree/canary/examples/rewrites the only problem is routes do not work in my project. But I will manage it :) – Prince Sodhi Mar 02 '21 at 16:18
Check that you are using Next.js v9.4 and above – felixmosh Mar 02 '21 at 16:22
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/229403/discussion-between-sodhi-saab-and-felixmosh). – Prince Sodhi Mar 02 '21 at 16:27
1

It works, I had two issues. Every time I change next.config.js. I have to manually kill the server and re-run it. Also, my locales were wrong :) Thank you for helping. – Prince Sodhi Mar 03 '21 at 07:50
Just incrementing, to use wildcard: ```json { source: '/cidades/:path*', destination: '/cities/:path*', }, ``` – mariomol Jun 17 '21 at 19:45
@felixmosh but how do you handle dynamic URL routes which can also be translated? To define a rewrite for each one is nuts. For example `/[blog_slug]/[category_slug]/[post_slug]` and `/de/[blog_slug]/[category_slug]/[post_slug]` where each slug is specific to each language. – Primoz Rome Aug 10 '21 at 09:06
Dynamic routes with translated slug are not an issue, I mean that you don't need to use rewrites. Since dynamic routes contains a placeholders instead of "page names" it matched by pattern. this means that `/de/[blog_slug]/[category_slug]/[post_slug]` should automatically render the page with this pattern`/[blog_slug]/[category_slug]/[post_slug]` – felixmosh Aug 10 '21 at 11:58

score 0 · Answer 2 · answered Nov 15 '20 at 21:56

0

For workaround,

I created the component page as a separate module, then I import and export it back at the locale page folder. So I can reuse 1 component for multiple languages.

answered Nov 15 '20 at 21:56

Phat Tran

3,404
1
19
22

score 0 · Answer 3 · answered Jun 24 '22 at 11:56

For the newest NextJS version (right now 12.1.6) you ould use this package https://www.npmjs.com/package/next-translate-routes

To build a fully internationalized website, one need to translate url segments: it is important for UX and SEO. For now, Next only ship with locale prefixes (see Next.js internationalized routing doc).

The next-routes package allow fully internationalized routing but it is no longer maintained, and it is designed without the latest Next api, such as internationalized routing, new data fetching methods, automatic static optimization.

How to translate routes with NextJS and next-i18next?

3 Answers3