5

Before next@10, next did not have any built-in support for internationalized routing.

I used next-translate/useTranslation. But the problem I am facing now is that I'm unable to set the lang attribute.

The only option I've found to set the attribute lang in next@9.4 using a functional component is document.documentElement.lang = lang which is not a good practice for SEO.

Is there any other way I could use to set the lang of my HTML page dynamically?

This is how my code is :

   /pages
       - index.js 
       - /[lang]
             - index.js

/pages/index.js

import { useEffect } from 'react'
import Router from 'next/router'

import i18nConfig from '../i18n.json'

const { defaultLanguage } = i18nConfig

export default function Index() {
  useEffect(() => {
    Router.replace(`/${defaultLanguage}`)
  }, [])

  return null
}

/[lang]/index.js

import useTranslation from 'next-translate/useTranslation'
import { getI18nProps, getI18nPaths, withI18n } from '../../utils/i18n'

...

export function MainIndex() {
    const { t, lang } = useTranslation()

    ...

    useEffect(() => {
        document.documentElement.lang = lang
    })

    ...
}

...

export default withI18n(MainIndex)

In case it's needed this is my config file.

i18n.json

{
  "allLanguages": [
    "fr",
    "en"
  ],
  "defaultLanguage": "fr",
  "redirectToDefaultLang": false
}

In the documentation they also talk about I18nProvider to set the lang attribut, but it does not work. No error and no lang attribut set in the document if I use :

<I18nProvider lang={lang}>
      ...
</I18nProvider>
crg
  • 4,284
  • 2
  • 29
  • 57
  • What is it exactly you want to accomplish? Redirect the user to your default language, or change the language of the session? I'm not sure what you are trying to do. Also keep in mind that NextJS is server side and client side at the same time, so you better redirect from the server side if you want, and pass in variables from the server. – Leroy May 21 '21 at 16:11
  • I don't want to redirect anything. I simply want a proper way to dynamically set the `lang` attribute using functional component. – crg May 21 '21 at 16:15
  • Seems to me that there is documentation about it. Have you tried changint the `[lang]` directory to `[locale]`? https://github.com/vinissimus/next-translate#9-how-to-change-the-language – Leroy May 21 '21 at 16:19
  • Why would I do that ? – crg May 21 '21 at 16:26
  • Because that's what stated in the documentation I've linked to. `In order to change the current language you can use the Next.js navigation (Link and Router) passing the locale prop` – Leroy May 21 '21 at 16:28
  • I'm greatfull you're trying to help but I think you did not get my question... It is not asking how to change the language... My website is already fully translated. As said, it is about the document `lang` attribute. – crg May 21 '21 at 16:29
  • It should be done automatically when using the correct implementation of NextJS and Next Translate: https://github.com/vercel/next.js/blob/canary/packages/next/pages/_document.tsx#L223 We're using the same packages, and the `` is the correct one when switching to another language. – Leroy May 21 '21 at 16:37
  • Unfortunately it is not automatic in my side. I might miss something, but right now if I do not set the attribut using `document.documentElement.lang = lang` it is not set. – crg May 21 '21 at 16:41
  • What does your `next.config.js` file look like? – juliomalves May 23 '21 at 17:47
  • It does not contains any config about translation. Only withCSS, withSass and webpack. All my configs are in an i18n.json file. – crg May 24 '21 at 07:13
  • It sounds like you have provided a fix for something missing on this version of next. Maybe submit an issue to their github repo, suggesting your solution? Or fork their github implementation and extend it. – Steve Tomlin May 24 '21 at 07:23

0 Answers0