How to use different url for same static page per locale in NextJS?

Question

I am building a Next.js app with internationalization using next-i18next.

// next-i18next.config.js
module.exports = {
  i18n: {
    locales: ['lv', 'en', 'ua'],
    defaultLocale: 'lv',
    localeDetection: false,
  },
}

For better SEO, I wold like to use different URL params for same translated page. Default NextJS page/locale mapping looks like this:

lv: /about-us
en: /en/about-us
ua: /ua/about-us

I would like to map this page like this:

lv: /par-mums
en: /en/about-us
ua: /ua/про-нас

Is it even possible? Thanks!

Answer 1

If you're trying to create an internationalized static website with Next.js, make sure you're aware of the limited export capability of Next.js:

Error: i18n support is not compatible with next export. See here for more info on deploying: https://nextjs.org/docs/deployment

There is a nice workaround for this: https://locize.com/blog/next-i18n-static/

btw: there is also another nice tutorial with examples here: https://locize.com/blog/next-i18next/

Answer 2

First of all im sorry that i don't know how to get the language code

but i want you to give a try on this

if (local == 'en') {
    return NextResponse.redirect('/en/about-us')
 }

like that

Answer 3

Probably I don't have to worry about URL. In _app.js I have mapped localized versions of same page. So, SERPs should be aware of other versions.

...

{locales.map((name, index) => {
    return (
        defaultLocale === name ?
            (<link key={`locale-${index}`} rel="alternate" hrefLang="x-default" href={`${process.env.NEXT_PUBLIC_SITE_URL}${pathname}`} />):
            (<link key={`locale-${index}`} rel="alternate" hrefLang={name} href={`${process.env.NEXT_PUBLIC_SITE_URL}/${name}${pathname}`} />)
    )
    })
}

https://developers.google.com/search/docs/advanced/crawling/localized-versions