So erkennen Sie Sprachpräferenzen von Benutzern in Next.js (Pages Router) v16

Problem

Jeder Browser sendet mit jeder HTTP-Anfrage einen Accept-Language-Header, der die bevorzugten Sprachen des Benutzers in der Reihenfolge ihrer Priorität angibt. Die meisten Anwendungen ignorieren dieses wertvolle Signal und liefern allen Besuchern eine Standardsprache aus, wodurch Benutzer gezwungen werden, manuell nach einem Sprachumschalter zu suchen, obwohl die Anwendung ihre Präferenzen bereits kennt. Dies erzeugt unnötige Reibung beim ersten Besuch und kann dazu führen, dass Benutzer die Website verlassen, bevor sie Inhalte in ihrer Sprache finden.

Wenn Benutzer auf dem Root-Pfad einer Anwendung landen, besteht die Möglichkeit, ihre Sprachpräferenzen zu untersuchen und sie sofort zu Inhalten in einer Sprache zu leiten, die sie verstehen. Ohne diese Erkennung erleben internationale Benutzer unabhängig von ihren Browser-Einstellungen eine englischsprachige Erfahrung und verpassen die Chance, einen einladenden, lokalisierten ersten Eindruck zu vermitteln.

Lösung

Erstellen Sie eine Root-Seite, die bei jeder Anfrage an den Root-Pfad serverseitige Logik ausführt. Lesen Sie den Accept-Language-HTTP-Header aus der eingehenden Anfrage und analysieren Sie ihn, um die bevorzugte Sprache des Benutzers zu extrahieren. Vergleichen Sie diese Sprache mit der Liste der von Ihrer Anwendung unterstützten Sprachen. Wenn eine Übereinstimmung gefunden wird, leiten Sie den Benutzer zum Root-Pfad dieser Sprache weiter. Wenn keine unterstützte Sprache übereinstimmt, leiten Sie zu einem Standard-Sprachpfad weiter.

Dieser Ansatz nutzt die getServerSideProps-Funktion von Next.js, die auf dem Server für jede Anfrage ausgeführt wird und eine Weiterleitungsantwort zurückgeben kann. Durch die Handhabung der Erkennung am Root-Pfad bietet die Anwendung eine intelligente Standardeinstellung und ermöglicht es Benutzern dennoch, bei Bedarf später manuell die Sprache zu wechseln.

Schritte

1. Bibliothek zum Parsen des Accept-Language-Headers installieren

Der Accept-Language-Header enthält eine kommagetrennte Liste von Sprachcodes mit optionalen Qualitätswerten, die geparst werden müssen. Installieren Sie eine Parser-Bibliothek, um dieses Format zu verarbeiten.

npm install accept-language-parser

Diese Bibliothek extrahiert Sprachcodes und Qualitätswerte aus dem Header-String und gibt sie in priorisierter Reihenfolge zurück.

2. Root-Seite mit serverseitiger Redirect-Logik erstellen

Erstellen Sie eine pages/index.tsx-Datei, die automatisch zum Root-Verzeichnis geroutet wird. Verwenden Sie getServerSideProps, um ein Redirect-Objekt mit Ziel und Permanent-Flag zurückzugeben.

import { GetServerSideProps } from "next";
import parser from "accept-language-parser";

const SUPPORTED_LOCALES = ["en", "fr", "es", "de"];
const DEFAULT_LOCALE = "en";

export default function RootPage() {
  return null;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const acceptLanguageHeader = context.req.headers["accept-language"];

  let targetLocale = DEFAULT_LOCALE;

  if (acceptLanguageHeader) {
    const languages = parser.parse(acceptLanguageHeader);

    const matchedLanguage = languages.find((lang) =>
      SUPPORTED_LOCALES.includes(lang.code),
    );

    if (matchedLanguage) {
      targetLocale = matchedLanguage.code;
    }
  }

  return {
    redirect: {
      destination: `/${targetLocale}`,
      permanent: false,
    },
  };
};

Die getServerSideProps-Funktion wird bei jeder Anfrage ausgeführt, liest den Accept-Language-Header und leitet zum entsprechenden Locale-Pfad weiter, bevor Seiteninhalte gerendert werden.

3. Unterstützte Locales definieren

Aktualisieren Sie das SUPPORTED_LOCALES-Array, um die von Ihrer Anwendung unterstützten Sprachen abzubilden. Der Parser gibt Sprachen in Qualitätsreihenfolge zurück, und der Code wählt die erste Übereinstimmung aus.

const SUPPORTED_LOCALES = ["en", "fr", "es", "de", "ja", "zh"];
const DEFAULT_LOCALE = "en";

Der Parser gibt Sprachen sortiert nach Qualität von höchster zu niedrigster zurück, sodass die erste gefundene unterstützte Sprache die stärkste Präferenz des Benutzers repräsentiert, die Ihre Anwendung erfüllen kann.

4. Fälle ohne Accept-Language-Header behandeln

Einige Anfragen enthalten möglicherweise keinen Accept-Language-Header. Der Code prüft auf das Vorhandensein des Headers und fällt auf die Standard-Locale zurück, wenn dieser fehlt.

if (acceptLanguageHeader) {
  const languages = parser.parse(acceptLanguageHeader);

  const matchedLanguage = languages.find((lang) =>
    SUPPORTED_LOCALES.includes(lang.code),
  );

  if (matchedLanguage) {
    targetLocale = matchedLanguage.code;
  }
}

Dies stellt sicher, dass die Anwendung immer zu einem gültigen Locale-Pfad weiterleitet, auch wenn Browser-Sprachinformationen nicht verfügbar sind.