Speichern der Sprachauswahl eines Benutzers

Problem

Ein Benutzer wählt manuell 'Französisch' auf einer Website aus. Wenn er seinen Browser schließt und später die Hauptadresse der Website eingibt (z.B. example.com), kehrt die Anwendung zur Standardeinstellung (z.B. Englisch) oder zur automatisch erkannten Sprache zurück. Dieses Versäumnis, die Auswahl zu speichern, zwingt den Benutzer dazu, den Sprachumschalter zu finden und seine Sprache bei jeder neuen Sitzung erneut auszuwählen.

Lösung

Wenn ein Benutzer eine Sprache auswählt, speichern Sie diese Auswahl in einem Cookie. In der Middleware, wenn ein Benutzer den Root-Pfad (/) besucht, überprüfen Sie diesen Cookie bevor Sie den Accept-Language-Header überprüfen. Wenn ein gültiger Cookie gefunden wird, leiten Sie den Benutzer zum Root der gewählten Sprache weiter (z.B. /fr), wodurch jede Browser-Standardeinstellung überschrieben wird.

Schritte

1. Sprachkonfiguration definieren

Erstellen Sie eine zentrale Konfigurationsdatei, um Ihre unterstützten Sprachen, eine Standardsprache und den Namen des Cookies zu speichern, den Sie für die Benutzerpräferenz verwenden werden.

// i18n.config.ts

export const locales = ['en', 'es', 'fr'];
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

2. Einen Sprachparser installieren

Sie benötigen immer noch einen Parser für den Accept-Language-Header, der als Fallback verwendet wird, wenn kein Cookie gesetzt ist.

npm install accept-language-parser

3. Die Middleware erstellen

Erstellen Sie eine middleware.ts-Datei im Stammverzeichnis Ihres Projekts. Diese Middleware wird zuerst nach dem NEXT_LOCALE-Cookie suchen. Wenn dieser nicht gefunden wird, wird als Fallback der Accept-Language-Header überprüft. Diese Logik gilt nur für Anfragen an den Root-Pfad (/).

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import parser from 'accept-language-parser';
import {
  locales,
  defaultLocale,
  localeCookieName,
} from './i18n.config';

function getPreferredLocale(request: NextRequest) {
  // 1. Check for the cookie
  const cookie = request.cookies.get(localeCookieName);
  if (cookie) {
    const locale = cookie.value;
    if (locales.includes(locale)) {
      return locale;
    }
  }

  // 2. Check the Accept-Language header
  const acceptLang = request.headers.get('Accept-Language');
  if (acceptLang) {
    const bestMatch = parser.pick(locales, acceptLang, {
      loose: true,
    });
    if (bestMatch) {
      return bestMatch;
    }
  }

  // 3. Return the default
  return defaultLocale;
}

export function middleware(request: NextRequest) {
  const { pathname } = request.nextUrl;

  // 1. Check if the request is for the root path
  if (pathname === '/') {
    // Get the user's preferred language (from cookie or header)
    const bestLocale = getPreferredLocale(request);

    // Redirect to the best-matched language path
    request.nextUrl.pathname = `/${bestLocale}`;
    return NextResponse.redirect(request.nextUrl);
  }

  // 2. For all other paths, continue as normal
  return NextResponse.next();
}

export const config = {
  matcher: [
    // We only want to run this on the root path for now
    '/',
    // We also need to match non-root paths to let them pass
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

Die Logik dieser Middleware priorisiert nun korrekt die explizite Auswahl des Benutzers (den Cookie) gegenüber seiner impliziten Präferenz (dem Browser-Header), wenn er den Root der Website besucht.