Question 22473 in SEO Question posted in
Some basic information to get you started with this can be found here.

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

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!

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    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


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

    Login or Signup to reply.
  3. 0

    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/

    Login or Signup to reply.
  4. 0

    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',
    },
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search