Comment maintenir la locale dans les liens de navigation dans Next.js (Pages Router) v16

Problème

Lorsqu'une application web encode la préférence linguistique dans le chemin de l'URL, chaque lien interne doit préserver ce contexte linguistique tout au long de la session de l'utilisateur. Sans gestion explicite de la locale, les liens écrits comme des chemins simples peuvent involontairement supprimer le préfixe de langue, entraînant la perte de la langue sélectionnée par l'utilisateur en cours de navigation. Cela perturbe l'expérience localisée et oblige les utilisateurs à sélectionner à nouveau leur langue préférée de manière répétée.

Solution

Assurez-vous que chaque lien de navigation interne inclut automatiquement la locale actuelle en la lisant depuis le contexte du routeur. Next.js Pages Router fournit une prise en charge intégrée des locales via son système de routage, où la locale active est disponible via le hook useRouter. Par défaut, le composant Link préserve la locale actuelle lors des transitions côté client, mais comprendre ce comportement et l'appliquer de manière cohérente dans toute l'application garantit une navigation fluide tenant compte de la locale.

Étapes

1. Accéder à la locale actuelle depuis le routeur

Le hook useRouter fournit locale (la locale actuellement active), locales (toutes les locales configurées) et defaultLocale (la locale par défaut configurée).

import { useRouter } from "next/router";

export default function Navigation() {
  const router = useRouter();
  const currentLocale = router.locale;

  return (
    <nav>
      <p>Current locale: {currentLocale}</p>
    </nav>
  );
}

Ce composant lit la locale active depuis le routeur, la rendant disponible pour une utilisation dans la logique de navigation.

2. Utiliser les composants Link sans props locale explicites

Lorsqu'aucune prop locale n'est fournie à Link, la locale actuellement active est utilisée lors des transitions côté client.

import Link from "next/link";

export default function Navigation() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/products">Products</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  );
}

Ces liens maintiennent automatiquement la locale actuelle. Si l'utilisateur consulte /fr/products, cliquer sur « À propos » navigue vers /fr/about.

3. Créer un helper de lien tenant compte de la locale pour un contrôle explicite

Pour les cas où vous avez besoin d'un contrôle explicite ou souhaitez rendre la gestion de la locale plus visible, créez un composant wrapper qui transmet explicitement la locale actuelle.

import Link from "next/link";
import { useRouter } from "next/router";
import { ReactNode } from "react";

interface LocaleLinkProps {
  href: string;
  children: ReactNode;
}

export function LocaleLink({ href, children }: LocaleLinkProps) {
  const { locale } = useRouter();

  return (
    <Link href={href} locale={locale}>
      {children}
    </Link>
  );
}

Ce composant rend la préservation de la locale explicite et peut être étendu avec une logique supplémentaire spécifique à la locale si nécessaire.

4. Gérer la navigation programmatique avec préservation de la locale

Lors de l'utilisation directe des méthodes du routeur, vous pouvez spécifier la locale via les options de transition, ou préserver toutes les informations de routage, y compris la locale, en passant le paramètre href sous forme d'objet.

import { useRouter } from "next/router";

export default function NavigationButton() {
  const router = useRouter();
  const { pathname, asPath, query, locale } = router;

  const handleNavigate = () => {
    router.push({ pathname: "/dashboard", query }, asPath, { locale });
  };

  return <button onClick={handleNavigate}>Go to Dashboard</button>;
}

Ce pattern garantit que la navigation programmatique maintient la locale actuelle et tous les paramètres de requête existants.

5. Appliquer des patterns de liens cohérents dans toute l'application

Utilisez le composant standard Link dans toute votre application, en vous appuyant sur son comportement intégré de préservation de la locale.

import Link from "next/link";

export default function ProductCard({ productId }: { productId: string }) {
  return (
    <article>
      <h2>Product {productId}</h2>
      <Link href={`/products/${productId}`}>View Details</Link>
      <Link href="/products">Back to Products</Link>
    </article>
  );
}

Les routes statiques et dynamiques incluent automatiquement le préfixe de locale actuel, maintenant les utilisateurs dans leur langue sélectionnée lors de leur navigation dans l'application.