CODEWITHSUNDEEP
next.jslocale
130db
130db

Reputation: 41

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

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!

Upvotes: 4

Views: 2724

Answers (4)

Murat Ersin
Murat Ersin

Reputation: 438

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',
    },
}

Upvotes: 0

130db
130db

Reputation: 41

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

Upvotes: 0

adrai
adrai

Reputation: 3188

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/

Upvotes: 1

user9797088
user9797088

Reputation:

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

Upvotes: 0

Related Questions