How to translate routes with NextJS and next-i18next?

reactjs translation next.js i18next

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

reactjs translation next.js i18next

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.