Wie man die Sprachauswahl über Sitzungen hinweg in Next.js (Pages Router) v16 speichert

Problem

Wenn ein Benutzer explizit eine Sprache auswählt, spiegelt diese Wahl seine Präferenz wider und sollte Vorrang vor der automatischen Erkennung durch Browser-Header oder Geolokalisierung haben. Ohne Persistenz geht diese Präferenz verloren, wenn der Browser geschlossen wird oder die Sitzung endet. Bei dem nächsten Besuch startet die Anwendung neu und zwingt den Benutzer, seine Sprache erneut auszuwählen. Diese Wiederholung signalisiert, dass die Anwendung Benutzerpräferenzen nicht respektiert, was Reibung erzeugt und das Vertrauen mindert.

Die Herausforderung ist zweifach: die explizite Wahl des Benutzers im Moment der Auswahl zu erfassen und diese Wahl bei nachfolgenden Besuchen abzurufen, bevor jegliche automatische Erkennungslogik ausgeführt wird. Wenn die gespeicherte Präferenz nicht früh im Request-Lebenszyklus überprüft wird, könnte der Benutzer basierend auf Browser-Einstellungen umgeleitet werden, anstatt auf seiner expliziten Wahl, was den Wert einer getroffenen Auswahl untergräbt.

Lösung

Speichern Sie die Sprachauswahl des Benutzers in einem persistenten Cookie, wenn er explizit eine Sprache wählt. Bei zukünftigen Besuchen der Anwendungswurzel wird dieses Cookie überprüft, bevor auf die browserbasierte Lokalisierungserkennung zurückgegriffen wird. Wenn eine gültige gespeicherte Locale gefunden wird, wird der Benutzer sofort zum Root-Pfad dieser Locale umgeleitet, wodurch sichergestellt wird, dass seine Präferenz sofort berücksichtigt wird.

Dieser Ansatz trennt die explizite Benutzerwahl von der automatischen Erkennung. Das Cookie fungiert als dauerhaftes Signal der Absicht, das Browser-Neustarts überlebt und Vorrang vor vorübergehenden Signalen wie dem Accept-Language-Header hat. Durch die serverseitige Überprüfung des Cookies während der ersten Anfrage erfolgt die Umleitung, bevor die Seite gerendert wird, was ein nahtloses Erlebnis bietet.

Schritte

1. Erstellen Sie einen Helper zum clientseitigen Setzen des Locale-Präferenz-Cookies

Wenn ein Benutzer eine Sprache auswählt, speichern Sie seine Auswahl in einem Cookie, der über Sitzungen hinweg bestehen bleibt.

export function setLocalePreference(locale: string) {
  const maxAge = 60 * 60 * 24 * 365;
  document.cookie = `NEXT_LOCALE=${locale}; path=/; max-age=${maxAge}; SameSite=Lax`;
}

Diese Funktion schreibt einen Cookie namens NEXT_LOCALE mit der gewählten Sprache, der ein Jahr gültig ist. Der Parameter path=/ stellt sicher, dass er in der gesamten Anwendung verfügbar ist, und SameSite=Lax bietet angemessenen CSRF-Schutz, während der Cookie bei Navigation auf oberster Ebene gesendet werden kann.

2. Rufen Sie den Helper auf, wenn der Benutzer eine Sprache auswählt

Integrieren Sie den Helper in Ihre Sprachumschalter-Komponente, damit die Präferenz sofort nach der Auswahl gespeichert wird.

import { useRouter } from "next/router";
import { setLocalePreference } from "@/lib/locale";

export default function LanguageSwitcher() {
  const router = useRouter();
  const { locales, locale: currentLocale } = router;

  const handleLocaleChange = (newLocale: string) => {
    setLocalePreference(newLocale);
    router.push(router.pathname, router.asPath, { locale: newLocale });
  };

  return (
    <select
      value={currentLocale}
      onChange={(e) => handleLocaleChange(e.target.value)}
    >
      {locales?.map((loc) => (
        <option key={loc} value={loc}>
          {loc.toUpperCase()}
        </option>
      ))}
    </select>
  );
}

Wenn der Benutzer die Auswahl ändert, wird der Cookie gesetzt und der Router navigiert zur selben Seite in der neuen Sprache. Der Cookie wird bei allen nachfolgenden Anfragen verfügbar sein.

3. Überprüfen Sie die gespeicherte Präferenz auf der Stammseite

In der getServerSideProps der Stammseite lesen Sie den Cookie und leiten bei Vorhandensein und Gültigkeit zur gespeicherten Sprache weiter.

import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => {
  const storedLocale = context.req.cookies.NEXT_LOCALE;
  const { locales, defaultLocale } = context;

  if (
    storedLocale &&
    locales?.includes(storedLocale) &&
    storedLocale !== defaultLocale
  ) {
    return {
      redirect: {
        destination: `/${storedLocale}`,
        permanent: false,
      },
    };
  }

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

export default function RootPage() {
  return null;
}

Dies prüft, ob der NEXT_LOCALE Cookie existiert und eine gültige Sprache aus der konfigurierten Liste der Anwendung enthält. Wenn die gespeicherte Sprache nicht die Standardsprache ist, wird der Benutzer zum Stamm dieser Sprache weitergeleitet. Andernfalls wird er zur Standardsprache weitergeleitet. Die Weiterleitung erfolgt serverseitig vor dem Rendering, wodurch sichergestellt wird, dass der Benutzer sofort auf der korrekten Sprachversion landet.

4. Konfigurieren des Locale-Routings in Next.js

Stellen Sie sicher, dass Ihre next.config.js die unterstützten Sprachen definiert, damit die Weiterleitungslogik die gespeicherte Präferenz validieren kann.

module.exports = {
  i18n: {
    locales: ["en", "fr", "de", "es"],
    defaultLocale: "en",
  },
};

Diese Konfiguration aktiviert das integrierte i18n-Routing von Next.js und macht die locales und defaultLocale in getServerSideProps verfügbar. Die Logik der Hauptseite verwendet diese Werte, um das gespeicherte Cookie zu validieren und das korrekte Weiterleitungsziel zu erstellen.