Wie man Sprachpräferenzen der Benutzer in Next.js (Pages Router) v16 erkennt

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 sind, 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 prüfen und sie sofort zu Inhalten in einer Sprache zu leiten, die sie verstehen. Ohne diese Erkennung erleben internationale Benutzer unabhängig von ihren Browsereinstellungen eine English-First-Erfahrung, wodurch die Chance verpasst wird, 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 Sprachen, die Ihre Anwendung unterstützt. Wenn eine Übereinstimmung gefunden wird, leiten Sie den Benutzer zum Root-Pfad dieser Sprache weiter. Wenn keine unterstützte Sprache übereinstimmt, leiten Sie zum Pfad der Standardsprache weiter.

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

Schritte

1. Installieren Sie eine Bibliothek zum Parsen des Accept-Language-Headers

Der Accept-Language-Header enthält eine durch Kommas getrennte 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 Prioritätsreihenfolge zurück.

2. Erstellen Sie eine Root-Seite mit serverseitiger Weiterleitungslogik

Erstellen Sie eine pages/index.tsx-Datei, die automatisch zum Root-Verzeichnis geroutet wird. Verwenden Sie getServerSideProps, um ein Redirect-Objekt mit einem Ziel und einem 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 Funktion getServerSideProps wird bei jeder Anfrage ausgeführt, liest den Accept-Language-Header und leitet zur entsprechenden Locale-Pfad weiter, bevor Seiteninhalt gerendert wird.

3. Definieren Sie Ihre unterstützten Locales

Aktualisieren Sie das SUPPORTED_LOCALES-Array, um es an die Sprachen anzupassen, die Ihre Anwendung unterstützt. 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 darstellt, 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 das Vorhandensein des Headers und greift auf die Standardsprache 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 Sprachpfad weiterleitet, selbst wenn keine Browserspracheninformationen verfügbar sind.