带有功能组件的动态 HTML lang 属性 Next@9.4

Question

在 next@10 之前，next 没有任何对国际化路由的内置支持。

我使用了next-translate/useTranslation。但是我现在面临的问题是我无法设置该lang属性。

我发现使用功能组件在 next@9.4 中设置属性 lang 的唯一选项document.documentElement.lang = lang对于 SEO 来说不是一个好的做法。

有没有其他方法可以用来动态设置我的 HTML 页面的语言？

这就是我的代码：

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

/页面/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)

如果需要，这是我的配置文件。

i18n.json

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

在文档中，他们还谈到I18nProvider设置 lang 属性，但它不起作用。如果我使用，则文档中没有错误且没有设置 lang 属性：

<I18nProvider lang={lang}>
      ...
</I18nProvider>