个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 18:00:33 28 4
gpt4 key购买 nike

在 next@10 之前，next 没有任何对国际化路由的内置支持。
我用过 next-translate/useTranslation 。但是我现在面临的问题是我无法设置 lang 属性。
我发现使用功能组件在next@9.4中设置属性lang的唯一选项是document.documentElement.lang = lang，这对于SEO来说不是一个好习惯。
有没有其他方法可以用来动态设置我的 HTML 页面的语言？
这就是我的代码:

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

如果需要，这是我的配置文件。
i18n.json 
{
  "allLanguages": [
    "fr",
    "en"
  ],
  "defaultLanguage": "fr",
  "redirectToDefaultLang": false
}
在 the documentation 中，他们还讨论了 I18nProvider 来设置 lang 属性，但它不起作用。如果我使用，则文档中没有错误且没有设置 lang 属性: 
<I18nProvider lang={lang}>
      ...
</I18nProvider>

最佳答案

你研究过 custum document 吗？你可以使用这样的东西。

render() {
    return (
      <Html lang="nl">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }

关于javascript - 带有功能组件的动态 HTML lang 属性 Next@9.4，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67390010/

28 4 0
文章推荐： javascript - vue 2.6项目中如何使用es2020特性？
文章推荐： cocoa - 保存/导出 cocoa 项目？
文章推荐： objective-c - mac 应用程序可以调节互联网使用吗？
文章推荐： android - 错误的行号谷歌播放崩溃报告
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com