我有一个多语言站点，需要根据每个页面的语言设置HTML lang属性。
我尝试在上下文中传递值，但是在页面更改时不会更新。
这里是当前代码：
import Document, { Html, Head, Main, NextScript } from 'next/document'
import GlobalContext , {eLanguage }from '../components/GlobalContext' //my global context
export default class MyDocument extends Document {
static async getInitialProps(ctx) {
const initialProps = await Document.getInitialProps(ctx)
return { ...initialProps }
}
static contextType = GlobalContext;
render() {
console.debug('Started')
console.debug('language:'+ this.context.language)
return (
<Html lang={eLanguage[this.context.language]}> //if the first page loaded as lang 'en' it sets 'en' and apply to all other pages.
<Head>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
更新：每个页面的语言可以从页面路由中推断出来
如果使用next/head，则可以将语言设置为html标签。传递给Head组件的所有内容都将放在或中。
Next Head的工作原理类似于React Helmet，因此您可以按照以下方式进行操作：
然后您可以将所需的语言传递给该组件，然后将该组件导入所需的页面。
import React from "react"
import Head from "next/head"
const Language = ({title, lang}) => (
<Head>
<html lang={lang} />
<title>{title}</title>
</Head>
)
export default Language
该html位将注入到标签内。
注意，即使我们这样注入，控制台也会记录以下错误：TypeError: n is null。
使用文档对象的lang属性可以这样设置：
var language= ...
switch (language) {
case en: document.documentElement.lang = 'en-us'; break;
...
}
在页面水合之前，不会在初始html上设置此lang属性，但仍会通过chrome“ hreflang”审核检查。