So legen Sie die Dokumentsprache in Next.js (Pages Router) v16 fest

Seitensprache für Browser und Screenreader deklarieren

Problem

Webseiten müssen ihre primäre Sprache gegenüber Browsern, Suchmaschinen und assistiven Technologien deklarieren. Ohne explizite Sprachdeklaration müssen diese Tools die Sprache des Inhalts erraten. Screenreader verwenden standardmäßig die Systemsprache des Benutzers, was zu falscher Aussprache führt, wenn die Inhaltssprache abweicht. Browser können nicht zuverlässig Übersetzungsfunktionen anbieten, da ihnen Informationen zur Ausgangssprache fehlen. Suchmaschinen haben Schwierigkeiten, Seiten für die richtige Sprachzielgruppe zu indexieren, was die Auffindbarkeit für Benutzer reduziert, die in dieser Sprache suchen.

Lösung

Setzen Sie das lang-Attribut auf dem Root-<html>-Element, um die primäre Sprache der Seite zu deklarieren. In Next.js Pages Router erfolgt dies durch Erstellen einer benutzerdefinierten Document-Komponente, die die HTML-Struktur Ihrer Anwendung umschließt. Das lang-Attribut akzeptiert einen standardisierten Sprachcode, der Browsern, assistiven Technologien und Suchmaschinen mitteilt, welche Sprache der Inhalt verwendet, und so korrekte Aussprache, angemessene Übersetzungsangebote und präzise Indexierung ermöglicht.

Schritte

1. Benutzerdefinierte Document-Datei erstellen

Erstellen Sie eine Datei mit dem Namen _document.js (oder _document.tsx für TypeScript) in Ihrem pages-Verzeichnis. Diese Datei ermöglicht es Ihnen, die HTML-Dokumentstruktur anzupassen, die jede Seite in Ihrer Anwendung umschließt.

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

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Die Html-Komponente aus next/document akzeptiert eine lang-Prop, die das Sprachattribut auf dem Root-HTML-Element setzt. Ersetzen Sie "en" durch den Sprachcode Ihres Inhalts.

2. Geeigneten Sprachcode verwenden

Sprachcodes folgen dem UTS Locale Identifiers Standardformat: language-region-script, wobei Region und Schrift optional sind. In den meisten Fällen verwenden Sie den zweistelligen ISO 639-1 Sprachcode.

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

export default function Document() {
  return (
    <Html lang="fr">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Häufige Beispiele sind "en" für Englisch, "es" für Spanisch, "fr" für Französisch, "de" für Deutsch und "ja" für Japanisch. Sie können bei Bedarf regionale Varianten wie "en-US" oder "en-GB" einschließen.

3. Dynamische Sprache basierend auf Locale festlegen

Wenn Ihre Anwendung mehrere Locales über Next.js i18n-Routing unterstützt, greifen Sie auf die aktuelle Locale aus dem Router-Kontext zu, um die Sprache dynamisch festzulegen.

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

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

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

Bei Verwendung der integrierten i18n-Konfiguration von Next.js stellt das Framework automatisch die Locale bereit und aktualisiert das lang-Attribut. Das locale-Prop ist auf der Document-Komponente verfügbar, wenn i18n in next.config.js konfiguriert ist.