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 beliebigen Wert eingeben, wie /xx/about. Wenn dieser Wert keiner unterstützten Sprache entspricht, kann die Anwendung abstürzen, einen generischen 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 anhand einer definitiven Liste unterstützter Sprachen. Wenn der Code nicht unterstützt wird, wird die Anfrage auf eine "Nicht gefunden"-Seite umgeschrieben, 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 Anwendung wiederverwendbar.

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

2. Erstellen Sie die Middleware-Datei

Erstellen Sie eine neue Datei mit dem Namen 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) {
  // Logic will go here in the next step
}

3. Fügen Sie die Validierungslogik hinzu

Innerhalb der middleware-Funktion holen Sie den pathname aus der Anfrage. Wir müssen das erste Segment des Pfads überprüfen (z. B. en in /en/about) und prüfen, ob es sich um eine gültige, unterstützte Sprache handelt.

// 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. Handle the root path separately
  // (This will be handled by the next recipe: "Detecting a user's
  // preferred language"). For now, we just let it pass.
  if (pathname === '/') {
    return NextResponse.next();
  }

  // 2. Extract the language code from the path
  const langCode = pathname.split('/')[1];

  // 3. Check if the language code is in our list
  if (locales.includes(langCode)) {
    // Language is valid, continue to the requested page
    return NextResponse.next();
  }

  // 4. If the language is not valid, rewrite to a 404 page
  // This keeps the invalid URL in the browser bar
  const url = request.nextUrl.clone();
  url.pathname = `/404`; // Assumes you have an app/404.tsx file
  return NextResponse.rewrite(url);
}

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

4. Middleware-Matcher konfigurieren

Um Ihre Middleware effizienter zu gestalten, sollten Sie festlegen, 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

// ... (the middleware function from above)

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 reguläre Ausdruck weist die Middleware an, auf allen Pfaden ausgeführt zu werden, außer auf denen, die typischerweise für statische Assets oder API-Aufrufe verwendet werden. Dies verhindert unnötige Validierungen bei jeder Bild-, Schrift- oder Datenanfrage.