Wie setze ich das HTML-lang-Attribut dynamisch für NextJs-Dokument?

Question 1

Ich habe eine mehrsprachige Website und muss das HTML-lang-Attribut entsprechend der Sprache für jede Seite einrichten.

Ich versuche, den Wert im Kontext zu übergeben, aber er wird nicht aktualisiert, wenn sich die Seite ändert.

Hier der aktuelle Code:

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

}

Update: Die Sprache jeder Seite kann aus der Seitenroute abgeleitet werden

Question 2

Ich glaube, die beste Lösung ist hier, eine benutzerdefinierte zu verwenden ./pages/_document.js Datei und überschreiben das Dokument selbst.

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

Weitere Erläuterungen finden Sie hier: https://nextjs.org/docs/advanced-features/custom-document

Question 3

Wenn du benutzt weiter/Kopf Sie können die Sprache für das HTML-Tag festlegen. Alles, was Sie an die Head-Komponente übergeben, wird entweder in die platziert <head> oder <html>.

Next Head funktioniert ähnlich wie React Helmet, also könnten Sie für Ihren Fall etwas in dieser Richtung tun:

Erstellen Sie eine Komponente und importieren Sie Head aus “next/head”
Innerhalb des Head-Tags fügen Sie die hinzu <html lang={lan} /> zum Bauteil.

Dann können Sie die gewünschte Sprache an diese Komponente übergeben und dann die Komponente auf den gewünschten Seiten importieren.

import React from "react"
import Head from "next/head"

const Language = ({title, lang}) => (
  <Head>
    <html lang={lang} />
    <title>{title}</title>
  </Head>
)

export default Language

Dieses HTML-Bit wird in die eingefügt <html> Schild.

Beachten Sie, dass selbst wenn wir es so injizieren, die Konsole den folgenden Fehler protokolliert: TypeError: n is null.

Question 4

Die nächsten 10 unterstützt Internationalisiertes Routing und werde hinzufügen lang dynamisch verlassen Sie mit:

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

Question 5

Ich habe dies implementiert, indem ich dies zur Datei next.config.js hinzugefügt habe:

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' }

Ich musste keine benutzerdefinierte _document.js erstellen

Question 6

Schaffen _document.js im `pages“-Ordner und verwende dies:

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;

für die Lokalisierung next.config.js

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

Question 7

Nextjs-Versionen nach 10 bieten standardmäßige Lokalisierungsunterstützung. Sie müssen nicht viel konfigurieren.

Es fügt HTML automatisch das lang-Attribut hinzu, aber es gibt immer noch bisher keine Unterstützung mit v12 für dir-Attribut Dazu gehört, dass wir diesen kleinen Trick im Inneren anwenden können _Ordner.

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;

Das Endergebnis wäre

Question 8

Sie können einen useEffect-Hook von React verwenden, um die Sprache des Dokuments festzulegen, ohne die Art und Weise ändern zu müssen, wie Next.js das HTML-Tag selbst generiert.

Fügen Sie innerhalb Ihrer Seitenkomponente oder einer anderen geeigneten Komponente den useEffect-Hook hinzu:

import {useEffect} from "react";

Und dann den Haken hinzufügen:

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

Dies besteht Lighthouses Überprüfung auf „hreflang“, und wenn Ihre Website mehrere Sprachen hat, können Sie dies verwenden, um die Seitensprache pro Seite festzulegen.