Umgang mit nicht unterstützten Sprachcodes

Problem

Eine Anwendung verwendet den URL-Pfad (z.B. /en/, /fr/), um die Sprache zu bestimmen, aber Benutzer können manuell jeden Wert eingeben, wie /xx/about. Wenn dieser Wert nicht mit einer unterstützten Sprache übereinstimmt, kann die Anwendung abstürzen, einen allgemeinen Fehler anzeigen oder nicht-übersetzte Inhalte darstellen, ohne den Benutzer zu einer gültigen Erfahrung zurückzuführen.

Lösung

Verwenden Sie eine Middleware, um alle eingehenden Anfragen abzufangen. Diese Middleware validiert den Sprachcode aus der URL gegen eine definitive Liste unterstützter Sprachen. Wenn der Code nicht unterstützt wird, wird die Anfrage zu einer "Not Found"-Seite umgeleitet, bevor sie die Anwendungslogik erreicht.

Schritte

1. Definieren Sie Ihre unterstützten Sprachen

Erstellen Sie eine zentrale Konfigurationsdatei, um Ihre Liste gültiger Sprachcodes (Locales) zu speichern. Dies macht die Liste für Ihre Middleware und andere Teile Ihrer App wiederverwendbar.

// i18n.config.ts
export const locales = ['en', 'es', 'fr'];

2. Erstellen Sie die Middleware-Datei

Erstellen Sie eine neue Datei namens middleware.ts im Stammverzeichnis Ihres Projekts (oder in Ihrem src/-Verzeichnis). Next.js erkennt diese Datei automatisch und führt sie bei Anfragen aus.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { locales } from './i18n.config';

export function middleware(request: NextRequest) {
  // Logik wird im nächsten Schritt hier eingefügt
}

3. Fügen Sie die Validierungslogik hinzu

Holen Sie innerhalb der middleware-Funktion den pathname aus der Anfrage. Wir müssen das erste Segment des Pfades überprüfen (z.B. en in /en/about) und sehen, ob es eine gültige, unterstützte Sprache ist.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
import { locales } from './i18n.config';

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

  // 1. Behandeln Sie den Root-Pfad separat
  // (Dies wird im nächsten Rezept behandelt: "Erkennen der bevorzugten
  // Sprache eines Benutzers"). Vorerst lassen wir es passieren.
  if (pathname === '/') {
    return NextResponse.next();
  }

  // 2. Extrahieren Sie den Sprachcode aus dem Pfad
  const langCode = pathname.split('/')[1];

  // 3. Überprüfen Sie, ob der Sprachcode in unserer Liste ist
  if (locales.includes(langCode)) {
    // Sprache ist gültig, fahren Sie mit der angeforderten Seite fort
    return NextResponse.next();
  }

  // 4. Wenn die Sprache nicht gültig ist, leiten Sie zu einer 404-Seite um
  // Dies behält die ungültige URL in der Browserleiste bei
  const url = request.nextUrl.clone();
  url.pathname = `/404`; // Setzt voraus, dass Sie eine app/404.tsx-Datei haben
  return NextResponse.rewrite(url);
}

Diese Logik überprüft jede Anfrage. Wenn die URL /fr/about ist, ist langCode fr, es wird in locales gefunden, und die Anfrage wird fortgesetzt. Wenn die URL /xx/about ist, ist langCode xx, es wird nicht gefunden, und dem Benutzer wird die 404-Seite angezeigt, ohne dass die App versucht, die ungültige Anfrage zu verarbeiten.

4. Konfigurieren des Middleware-Matchers

Um Ihre Middleware effizienter zu gestalten, sollten Sie angeben, auf welchen Pfaden sie ausgeführt werden soll. Wir möchten, dass sie bei Seitenanfragen ausgeführt wird, aber statische Dateien und API-Routen überspringt.

Fügen Sie ein config-Objekt am Ende Ihrer middleware.ts-Datei hinzu.

// middleware.ts

// ... (die Middleware-Funktion von oben)

export const config = {
  matcher: [
    // Überspringe 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 reguläre Ausdruck weist die Middleware an, auf allen Pfaden zu laufen, außer auf denjenigen, die typischerweise für statische Assets oder API-Aufrufe verwendet werden. Dies verhindert unnötige Validierungen bei jeder Anfrage nach Bildern, Schriftarten oder Daten.