Wie man die Dokumentsprache in Next.js (Pages Router) v16 festlegt

Seitensprache für Browser und Screenreader deklarieren

Problem

Webseiten müssen ihre Hauptsprache für Browser, Suchmaschinen und assistive Technologien deklarieren. Ohne eine 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 Übersetzungsfunktionen nicht zuverlässig anbieten, da ihnen Informationen zur Ausgangssprache fehlen. Suchmaschinen haben Schwierigkeiten, Seiten für das richtige Sprachpublikum zu indexieren, was die Auffindbarkeit für Benutzer, die in dieser Sprache suchen, verringert.

Lösung

Setzen Sie das lang-Attribut auf dem Root-<html>-Element, um die Hauptsprache der Seite zu deklarieren. Im Next.js Pages Router wird dies durch Erstellen einer benutzerdefinierten Document-Komponente erreicht, 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 ermöglicht so korrekte Aussprache, angemessene Übersetzungsangebote und genaue Indexierung.

Schritte

1. Erstellen Sie eine benutzerdefinierte Document-Datei

Erstellen Sie eine Datei namens _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. Verwenden Sie den entsprechenden Sprachcode

Sprachcodes folgen dem UTS Locale Identifiers Standardformat: language-region-script, wobei Region und Script optional sind. Für die meisten Fälle 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>
  );
}

Gängige Beispiele sind "en" für Englisch, "es" für Spanisch, "fr" für Französisch, "de" für Deutsch und "ja" für Japanisch. Bei Bedarf können Sie 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. Die locale-Prop ist auf der Document-Komponente verfügbar, wenn i18n in next.config.js konfiguriert ist.