如何在NextJs文档上动态设置HTML语言属性？

li9yvcax 于 2022-10-21 发布在其他

关注(0)|答案(9)|浏览(348)

bounty 7天后到期。对这个问题的回答有资格获得+100的声誉奖励。James正在寻找来自可靠来源的答案。

我有一个多语言的网站，需要设置的每个页面的语言的HTMLLang属性。
我尝试在上下文中传递该值，但不会在页面更改时更新。
以下是当前代码：

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

来源：https://stackoverflow.com/questions/61310847/how-to-set-html-lang-attribute-dynamically-on-nextjs-document

9条答案

按热度按时间

gg58donl1#

我认为这里最好的解决方案是使用一个定制的./pages/_document.js文件并覆盖文档本身。

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

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

export default MyDocument

更多解释可以在这里找到：https://nextjs.org/docs/advanced-features/custom-document

赞(0）回复(0）举报 2022-10-21

z8dt9xmd2#

Next 10支持Internationalized Routing，将动态添加lang，为您留下：

<Html>
  <Head />
  <body>       
    <Main />
    <NextScript />
  </body>
</Html>

赞(0）回复(0）举报 2022-10-21

xpcnnkqh3#

如果使用next/head，则可以将语言设置为html标记。您传递给Head组件的任何内容都将放置在<head>或<html>中。
Next Head的工作原理类似于React Helm ，因此对于您的情况，可以执行以下操作：

创建组件并从“Next/Head”导入Head
在head标记内，将<html lang={lan} />添加到组件。

然后，您可以将所需的语言传递给该组件，然后在所需的页面上导入该组件。

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位将被注入到<html>标记中。
请注意，即使我们这样注入它，控制台也会记录以下错误：TypeError: n is null。

赞(0）回复(0）举报 2022-10-21

neekobn84#

我通过将以下代码添加到next.config.js文件实现了这一点：

i18n: {
// These are all the locales you want to support in
// your application
locales: ['en-US'],
// This is the default locale you want to be used when visiting
// a non-locale prefixed path e.g. `/hello`
defaultLocale: 'en-US' }

我不需要创建自定义_Document.js

赞(0）回复(0）举报 2022-10-21

7kqas0il5#

在pages``文件夹中创建_document.js`，并使用以下命令：

import Document, { Head, Html, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(context) {
    const initialProps = await Document.getInitialProps(context);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang={this.props.locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

对于本地化，请使用next.config.js

{
 i18n: {
    locales: ['en', 'fr', 'de',],
    defaultLocale: 'en',
  },
}

赞(0）回复(0）举报 2022-10-21

cigdeys36#

Nextjs 10以后的版本提供了默认的本地化支持，您不必进行太多配置。
它会自动将lang属性添加到html中，但仍然直到现在v12才支持dir属性来包含我们可以在**_文档文件**中使用的这个小技巧。

import { Head, Html, Main, NextScript } from "next/document";

function Document(props: any) {

  return (
    <Html dir={props.__NEXT_DATA__.locale === "en" ? "ltr" : "rtl"}>
      <Head></Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

export default Document;

最终结果为

赞(0）回复(0）举报 2022-10-21

nqwrtyyt7#

使用Document对象可以如下设置lang属性：

var language= ...
switch (language) {
    case en:  document.documentElement.lang = 'en-us'; break;
    ...
}

在页面加水之前，不会在初始html上设置此lang属性，但仍将通过Chrome“hrefang”审计检查。

赞(0）回复(0）举报 2022-10-21

mlnl4t2r8#

您可以使用Reaction useEffect挂钩来设置文档的语言，而不必更改Next.js本身生成HTML标记的方式。
在页面组件或其他适当的组件中，包括useEffect挂钩：

import {useEffect} from "react";

然后添加挂钩：

const MyPage = () => {
  useEffect(() => {
    document.documentElement.lang = "en-us";
  });
  // The rest of your component
}

这将通过LighTower的“hrefang”检查，如果您的站点有多种语言，您可以使用它来设置每个页面的页面语言。

赞(0）回复(0）举报 2022-10-21

cl25kdpy9#

要覆盖默认的nextjs设置，请创建./Pages/_Document.js文件并扩展Document类，如下所示：

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

允许将自定义属性用作道具，如lang：

<Html lang="en">

您可以在此处阅读有关自定义文档的更多信息：https://nextjs.org/docs/advanced-features/custom-document

赞(0）回复(0）举报 2022-10-21

我来回答

如何在NextJs文档上动态设置HTML语言属性？

9条答案

相关问题

热门标签

最新问答