Erkennung der bevorzugten Sprache eines Benutzers

Problem

Wenn ein Benutzer zum ersten Mal die Hauptseite einer Anwendung besucht (z.B. /), wird eine Standardsprache wie Englisch angezeigt. Dies erzeugt sofort Reibung für Benutzer, die andere Sprachen sprechen, und zwingt sie, manuell nach einem Sprachumschalter zu suchen, obwohl ihr Browser bereits ihre Präferenz mitteilt.

Lösung

Verwenden Sie Middleware, um Anfragen für den Root-Pfad (/) abzufangen. Überprüfen Sie den Accept-Language HTTP-Header des Benutzers, um seine bevorzugte Sprache zu ermitteln. Wenn diese Sprache von der Anwendung unterstützt wird, leiten Sie den Benutzer zum Root dieser Sprache weiter (z.B. /fr). Falls nicht, leiten Sie ihn zu einer Standardsprache weiter (z.B. /en).

Schritte

1. Installieren Sie einen Sprachparser

Der Accept-Language Header kann komplex sein (z.B. fr-CH, fr;q=0.9, en;q=0.8). Eine kleine Bibliothek hilft dabei, diesen Header zu analysieren und die beste Übereinstimmung aus unserer Liste unterstützter Sprachen zu finden.

Führen Sie diesen Befehl in Ihrem Terminal aus:

npm install accept-language-parser

2. Definieren Sie Ihre Sprachen und den Standard

Erstellen Sie eine zentrale Konfigurationsdatei, um Ihre Liste unterstützter Sprachen zu speichern und einen Standard zu definieren. Dieser Standard wird verwendet, wenn die Browsereinstellungen eines Benutzers mit keiner von Ihnen unterstützten Sprache übereinstimmen.

// i18n.config.ts

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

3. Erstellen Sie die Middleware

Erstellen Sie eine middleware.ts Datei im Hauptverzeichnis Ihres Projekts. Diese Datei wird bei eingehenden Anfragen ausgeführt und ermöglicht es Ihnen, den Pfad und die Header zu überprüfen.

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

// Hilfsfunktion, um die beste Sprachübereinstimmung zu finden
function getBestLocale(acceptLangHeader: string | null) {
  if (!acceptLangHeader) {
    return defaultLocale;
  }

  // Verwenden Sie den Parser, um die beste unterstützte Sprache zu finden
  const bestMatch = parser.pick(locales, acceptLangHeader, {
    loose: true,
  });

  return bestMatch || defaultLocale;
}

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

  // 1. Prüfen, ob die Anfrage für den Root-Pfad ist
  if (pathname === '/') {
    // Die bevorzugte Sprache des Benutzers abrufen
    const acceptLang = request.headers.get('Accept-Language');
    const bestLocale = getBestLocale(acceptLang);

    // Weiterleitung zum am besten passenden Sprachpfad
    request.nextUrl.pathname = `/${bestLocale}`;
    return NextResponse.redirect(request.nextUrl);
  }

  // 2. Für alle anderen Pfade normal fortfahren
  return NextResponse.next();
}

export const config = {
  matcher: [
    // Überspringen Sie alle Pfade, die beginnen mit:
    // - api (API-Routen)
    // - _next/static (statische Dateien)
    // - _next/image (Bildoptimierungsdateien)
    // - favicon.ico (Favicon-Datei)
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

Dieser Code führt die Logik nur für den Root-Pfad (/) aus. Wenn ein Benutzer / besucht, wird sein Accept-Language Header überprüft, die beste Übereinstimmung gefunden (z.B. es) und er wird zu /es weitergeleitet. Alle anderen Anfragen, wie /en/about, werden von dieser Logik ignoriert und durchgelassen.