So speichern Sie die Sprachauswahl über Sitzungen hinweg in Next.js (Pages Router) v16

Problem

Wenn ein Benutzer explizit eine Sprache auswählt, spiegelt diese Wahl seine Präferenz wider und sollte Vorrang vor der automatischen Erkennung aus Browser-Headern oder Geolokalisierung haben. Ohne Persistenz geht diese Präferenz verloren, wenn der Browser geschlossen wird oder die Sitzung endet. Beim 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 eine automatische Erkennungslogik ausgeführt wird. Wenn die gespeicherte Präferenz nicht früh im Request-Lifecycle überprüft wird, kann der Benutzer basierend auf Browser-Einstellungen anstelle seiner expliziten Wahl umgeleitet werden, was den Wert der getroffenen Auswahl untergräbt.

Lösung

Speichern Sie die Sprachauswahl des Benutzers in einem persistenten Cookie, wenn dieser explizit eine Sprache auswählt. Bei zukünftigen Besuchen des Anwendungs-Roots prüfen Sie dieses Cookie, bevor Sie auf die browser-basierte Locale-Erkennung zurückgreifen. Wenn eine gültige gespeicherte Locale gefunden wird, leiten Sie den Benutzer zum Root-Pfad dieser Locale um und stellen so sicher, 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 transienten Signalen wie dem Accept-Language-Header hat. Durch die serverseitige Prüfung des Cookies während des initialen Requests erfolgt die Umleitung, bevor die Seite gerendert wird, was eine nahtlose Erfahrung bietet.

Schritte

1. Erstellen Sie eine Hilfsfunktion zum clientseitigen Setzen des Locale-Präferenz-Cookies

Wenn ein Benutzer eine Sprache auswählt, speichern Sie seine Wahl in einem Cookie, das ü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 ein Cookie namens NEXT_LOCALE mit der gewählten Locale, gültig für ein Jahr. Der path=/ stellt sicher, dass es in der gesamten Anwendung verfügbar ist, und SameSite=Lax bietet angemessenen CSRF-Schutz und erlaubt gleichzeitig das Senden des Cookies bei Top-Level-Navigation.

2. Rufen Sie die Hilfsfunktion auf, wenn der Benutzer eine Sprache auswählt

Integrieren Sie die Hilfsfunktion in Ihre Sprachumschalter-Komponente, damit die Präferenz sofort bei 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 das Cookie gesetzt und der Router navigiert zur selben Seite in der neuen Locale. Das Cookie ist bei allen nachfolgenden Anfragen verfügbar.

3. Überprüfen Sie die gespeicherte Präferenz auf der Root-Seite

Lesen Sie in der getServerSideProps der Root-Seite das Cookie und leiten Sie zur gespeicherten Locale weiter, falls diese existiert und gültig ist.

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 überprüft, ob das NEXT_LOCALE-Cookie existiert und eine gültige Locale aus der konfigurierten Liste der Anwendung enthält. Wenn die gespeicherte Locale nicht die Standardlocale ist, wird der Benutzer zum Root dieser Locale weitergeleitet. Andernfalls wird er zur Standardlocale weitergeleitet. Die Weiterleitung erfolgt serverseitig vor dem Rendering, sodass der Benutzer sofort auf der korrekten Locale landet.

4. Konfigurieren Sie das Locale-Routing in Next.js

Stellen Sie sicher, dass Ihre next.config.js die unterstützten Locales 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 stellt locales und defaultLocale in getServerSideProps zur Verfügung. Die Root-Page-Logik verwendet diese Werte, um das gespeicherte Cookie zu validieren und das korrekte Weiterleitungsziel zu konstruieren.