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!

Does this answer your question: [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, May 03 '22 at 06:21

score 1 · Answer 1 · answered May 03 '22 at 08:17

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/

score 0 · Answer 2 · answered May 03 '22 at 05:55

0

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

answered May 03 '22 at 05:55

1

Thanks for reply! Nextjs does it automaticaly when switching locales – 130db May 03 '22 at 11:10

score 0 · Answer 3 · answered May 03 '22 at 11:19

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

score 0 · Answer 4 · answered Dec 31 '22 at 08:52

You can use exportPathMap. With this method you can generate different static html by language. Your static pages size will be grow as twice but it is works and no any impact page load speed.

Your custom Link Component:

import i18n from 'i18next'
import Link from 'next/link'

interface IProps {
  fr: string
  en: string
  children: React.ReactNode
}

export default function TranslatedLink({ fr, en, children }: IProps) {
  let link = fr

  if (i18n.language === 'en') {
    link = en
  }

  return <Link href={link}>{children}</Link>
}

your link:

<TranslatedLink fr="/contactez" en="contact>Contact</TranslatedLink>

in next.config.js

exportPathMap: async function () {
  return {
    '/contact': { page: '/contact' },
    '/contactez': { page: '/contact/ }
  }
}

For running on locale add this in to next.config.js:

async rewrites() {
  return [
    {
      source: '/contactez',
      destination: '/contact',
    },
}

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

4 Answers4