Erkennung der bevorzugten Sprache eines Benutzers

Problem

Wenn ein Benutzer zum ersten Mal die Root-Ebene einer Anwendung besucht (z. B. /), wird eine Standardsprache angezeigt, beispielsweise Englisch. Dies führt zu sofortiger Reibung für Benutzer, die andere Sprachen sprechen, da sie manuell nach einem Sprachwechsler suchen müssen, obwohl ihr Browser bereits ihre Präferenz kommuniziert.

Lösung

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

Schritte

1. Installieren Sie einen Sprach-Parser

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 parsen 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 Standardsprache

Erstellen Sie eine zentrale Konfigurationsdatei, um Ihre Liste unterstützter Sprachen zu speichern und eine Standardsprache zu definieren. Diese Standardsprache wird verwendet, wenn die Browser-Präferenzen 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 Root-Verzeichnis 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';

// Helper function to find the best language match
function getBestLocale(acceptLangHeader: string | null) {
  if (!acceptLangHeader) {
    return defaultLocale;
  }

  // Use the parser to find the best supported language
  const bestMatch = parser.pick(locales, acceptLangHeader, {
    loose: true,
  });

  return bestMatch || 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
    const acceptLang = request.headers.get('Accept-Language');
    const bestLocale = getBestLocale(acceptLang);

    // 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: [
    // Skip all paths that start with:
    // - api (API routes)
    // - _next/static (static files)
    // - _next/image (image optimization files)
    // - favicon.ico (favicon file)
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

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