So validieren Sie Locale-Parameter in URLs in Next.js (Pages Router) v16

Problem

Wenn Locale-Codes Teil der URL-Struktur werden, verwandeln sie sich in Benutzereingaben, die validiert werden müssen. Ein Besucher kann /xx/about oder /gibberish/contact genauso einfach eingeben wie ein gültiges Locale wie /en/about. Ohne Validierung kann die Anwendung abstürzen, fehlerhafte Inhalte anzeigen oder verwirrende Fehlermeldungen ausgeben. Benutzer, die auf ungültige Locale-URLs stoßen, benötigen einen klaren Weg nach vorne – entweder durch Weiterleitung zu einem gültigen Locale oder eine ordnungsgemäße „Nicht gefunden"-Antwort, die ihnen hilft zu verstehen, was schiefgelaufen ist.

Lösung

Validieren Sie eingehende Locale-Parameter gegen eine Liste unterstützter Locales, bevor die Anfrage die Seitenkomponenten erreicht. Verwenden Sie Next.js-Middleware, um Anfragen abzufangen, zu prüfen, ob das Locale in der URL mit einem unterstützten Wert übereinstimmt, und entsprechend zu reagieren. Bei ungültigen Locales leiten Sie den Benutzer zum Standard-Locale weiter oder schreiben Sie die Anfrage um, um eine 404-Seite anzuzeigen. Dies stellt sicher, dass nur gültige Locale-Codes zur Darstellung von Inhalten fortfahren, während ungültige Codes elegant behandelt werden, ohne die Benutzererfahrung zu beeinträchtigen.

Schritte

1. Unterstützte Locales in der Next.js-Konfiguration definieren

Konfigurieren Sie die i18n-Einstellungen in next.config.js, um zu deklarieren, welche Locales Ihre Anwendung unterstützt und welches Locale als Standard dient.

module.exports = {
  i18n: {
    locales: ["en", "fr", "de"],
    defaultLocale: "en",
    localeDetection: false,
  },
};

Das Setzen von localeDetection auf false verhindert automatische Weiterleitungen basierend auf Browser-Präferenzen und gibt Ihnen die volle Kontrolle über die Locale-Behandlung.

2. Middleware zur Validierung von Locale-Parametern erstellen

Erstellen Sie eine middleware.ts-Datei im Stammverzeichnis Ihres Projekts oder im src-Ordner, falls Sie einen verwenden.

import { NextRequest, NextResponse } from "next/server";

const SUPPORTED_LOCALES = ["en", "fr", "de"];
const DEFAULT_LOCALE = "en";

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

  const pathnameHasLocale = SUPPORTED_LOCALES.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
  );

  if (!pathnameHasLocale) {
    return;
  }

  const localeInPath = pathname.split("/")[1];

  if (!SUPPORTED_LOCALES.includes(localeInPath)) {
    const url = request.nextUrl.clone();
    url.pathname = pathname.replace(`/${localeInPath}`, `/${DEFAULT_LOCALE}`);
    return NextResponse.redirect(url);
  }
}

export const config = {
  matcher: ["/((?!_next|api|favicon.ico|.*\\..*).*)"],
};

Die Middleware extrahiert die Locale aus dem URL-Pfad, prüft sie gegen das Array der unterstützten Locales und leitet ungültige Locales zur Standard-Locale um, während der Rest des Pfads erhalten bleibt.

3. Ungültige Locales mit einer 404-Antwort behandeln

Wenn Sie lieber eine 404-Seite anzeigen möchten, anstatt umzuleiten, schreiben Sie die Anfrage auf die benutzerdefinierte 404-Seite um.

import { NextRequest, NextResponse } from "next/server";

const SUPPORTED_LOCALES = ["en", "fr", "de"];

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

  const pathnameHasLocale = SUPPORTED_LOCALES.some(
    (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`,
  );

  if (!pathnameHasLocale) {
    return;
  }

  const localeInPath = pathname.split("/")[1];

  if (!SUPPORTED_LOCALES.includes(localeInPath)) {
    const url = request.nextUrl.clone();
    url.pathname = "/404";
    return NextResponse.rewrite(url);
  }
}

export const config = {
  matcher: ["/((?!_next|api|favicon.ico|.*\\..*).*)"],
};

Erstellen Sie eine benutzerdefinierte 404-Seite unter pages/404.js, die zur Build-Zeit statisch generiert wird.

4. Eine benutzerdefinierte 404-Seite erstellen

export default function Custom404() {
  return (
    <div>
      <h1>404 - Page Not Found</h1>
      <p>The page you are looking for does not exist.</p>
    </div>
  );
}

Diese Seite wird angezeigt, wenn die Middleware ungültige Locale-Anfragen umschreibt, und bietet Benutzern eine klare Meldung, dass die angeforderte URL nicht verfügbar ist.