Wie man Locale-Parameter in URLs in Next.js (Pages Router) v16 validiert

Problem

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

Lösung

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

Schritte

1. Definieren Sie unterstützte Gebietsschemata in der Next.js-Konfiguration

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

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

Durch das Setzen von localeDetection auf false werden automatische Weiterleitungen basierend auf Browser-Präferenzen verhindert, was Ihnen die volle Kontrolle über die Gebietsschema-Handhabung gibt.

2. Erstellen Sie Middleware zur Validierung von Gebietsschema-Parametern

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 das Gebietsschema aus dem URL-Pfad, überprüft es anhand des Arrays unterstützter Gebietsschemata und leitet ungültige Gebietsschemata zum Standard-Gebietsschema weiter, während der Rest des Pfades beibehalten wird.

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

Wenn Sie lieber eine 404-Seite anzeigen möchten, anstatt weiterzuleiten, schreiben Sie die Anfrage zur benutzerdefinierten 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 - Seite nicht gefunden</h1>
      <p>Die gesuchte Seite existiert nicht.</p>
    </div>
  );
}

Diese Seite wird angezeigt, wenn der Middleware Anfragen mit ungültigen Locales umschreibt und bietet den Benutzern eine klare Mitteilung, dass die angeforderte URL nicht verfügbar ist.