Cómo mantener el locale en los enlaces de navegación en Next.js (Pages Router) v16

Problema

Cuando una aplicación web codifica la preferencia de idioma en la ruta de la URL, cada enlace interno debe preservar ese contexto de idioma durante toda la sesión del usuario. Sin un manejo explícito del locale, los enlaces escritos como rutas simples pueden eliminar inadvertidamente el prefijo de idioma, haciendo que los usuarios pierdan su idioma seleccionado durante la navegación. Esto interrumpe la experiencia localizada y obliga a los usuarios a seleccionar repetidamente su idioma preferido.

Solución

Asegúrate de que cada enlace de navegación interno incluya automáticamente el locale actual leyéndolo desde el contexto del router. Next.js Pages Router proporciona soporte integrado para locales a través de su sistema de enrutamiento, donde el locale activo está disponible mediante el hook useRouter. Por defecto, el componente Link preserva el locale actual durante las transiciones del lado del cliente, pero comprender este comportamiento y aplicarlo de manera consistente en toda la aplicación garantiza una navegación fluida con reconocimiento de locale.

Pasos

1. Acceder al locale actual desde el router

El hook useRouter proporciona locale (el locale actualmente activo), locales (todos los locales configurados) y defaultLocale (el locale predeterminado configurado).

import { useRouter } from "next/router";

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

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

Este componente lee el locale activo desde el router, haciéndolo disponible para su uso en la lógica de navegación.

2. Usar componentes Link sin props de locale explícitas

Cuando no se proporciona ninguna prop de locale a Link, se utiliza el locale actualmente activo durante las transiciones del cliente.

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>
  );
}

Estos enlaces mantienen automáticamente el locale actual. Si el usuario está viendo /fr/products, al hacer clic en "About" navega a /fr/about.

3. Crear un helper de enlace con reconocimiento de locale para control explícito

Para casos en los que necesites control explícito o quieras hacer más visible el manejo del locale, crea un componente wrapper que pase explícitamente el locale actual.

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>
  );
}

Este componente hace explícita la preservación del locale y puede extenderse con lógica adicional específica del locale si es necesario.

4. Gestionar la navegación programática con preservación del locale

Al usar métodos del router directamente, puedes especificar el locale mediante las opciones de transición, o preservar toda la información de enrutamiento incluyendo el locale pasando el parámetro href como un objeto.

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>;
}

Este patrón asegura que la navegación programática mantenga el locale actual y cualquier parámetro de consulta existente.

5. Aplicar patrones de enlace consistentes en toda la aplicación

Usa el componente estándar Link en toda tu aplicación, confiando en su comportamiento integrado de preservación del 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>
  );
}

Tanto las rutas estáticas como las dinámicas incluyen automáticamente el prefijo del locale actual, manteniendo a los usuarios en su idioma seleccionado mientras navegan por la aplicación.