Comment valider les paramètres de locale dans les URL dans Next.js (Pages Router) v16

Problème

Lorsque les codes de locale font partie de la structure d'URL, ils se transforment en entrée utilisateur qui doit être validée. Un visiteur peut saisir /xx/about ou /gibberish/contact aussi facilement qu'une locale valide comme /en/about. Sans validation, l'application peut planter, afficher du contenu cassé ou montrer des messages d'erreur confus. Les utilisateurs qui rencontrent des URL de locale invalides ont besoin d'un chemin clair à suivre, soit par redirection vers une locale valide, soit par une réponse « Non trouvé » appropriée qui les aide à comprendre ce qui s'est mal passé.

Solution

Validez les paramètres de locale entrants par rapport à une liste de locales prises en charge avant que la requête n'atteigne les composants de page. Utilisez le middleware Next.js pour intercepter les requêtes, vérifier si la locale dans l'URL correspond à une valeur prise en charge et répondre de manière appropriée. Pour les locales invalides, redirigez l'utilisateur vers la locale par défaut ou réécrivez la requête pour afficher une page 404. Cela garantit que seuls les codes de locale valides procèdent au rendu du contenu, tandis que les codes invalides sont gérés de manière élégante sans casser l'expérience utilisateur.

Étapes

1. Définir les locales prises en charge dans la configuration Next.js

Configurez les paramètres i18n dans next.config.js pour déclarer quelles locales votre application prend en charge et quelle locale sert de locale par défaut.

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

Définir localeDetection sur false empêche les redirections automatiques basées sur les préférences du navigateur, vous donnant un contrôle total sur la gestion des locales.

2. Créer un middleware pour valider les paramètres de locale

Créez un fichier middleware.ts à la racine de votre projet ou dans le dossier src si vous en utilisez un.

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|.*\\..*).*)"],
};

Le middleware extrait la locale du chemin de l'URL, la vérifie par rapport au tableau des locales prises en charge, et redirige les locales invalides vers la locale par défaut tout en préservant le reste du chemin.

3. Gérer les locales invalides avec une réponse 404

Si vous préférez afficher une page 404 au lieu de rediriger, réécrivez la requête vers la page 404 personnalisée.

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|.*\\..*).*)"],
};

Créez une page 404 personnalisée à pages/404.js qui est générée statiquement au moment de la compilation.

4. Créer une page 404 personnalisée

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

Cette page s'affiche lorsque le middleware réécrit les requêtes de locale invalides, fournissant aux utilisateurs un message clair indiquant que l'URL demandée n'est pas disponible.