Cómo mantener el idioma 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 URL, cada enlace interno debe preservar ese contexto de idioma durante toda la sesión del usuario. Sin un manejo explícito de la configuración regional, 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 la configuración regional actual leyéndola desde el contexto del enrutador. El Pages Router de Next.js proporciona soporte integrado para configuraciones regionales a través de su sistema de enrutamiento, donde la configuración regional activa está disponible mediante el hook useRouter. Por defecto, el componente Link preserva la configuración regional actual durante las transiciones del lado del cliente, pero entender este comportamiento y aplicarlo de manera consistente en toda la aplicación garantiza una navegación fluida con reconocimiento de idioma.

Pasos

1. Acceder a la configuración regional actual desde el enrutador

El hook useRouter proporciona locale (la configuración regional actualmente activa), locales (todas las configuraciones regionales configuradas) y defaultLocale (la configuración regional predeterminada configurada).

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 la configuración regional activa desde el enrutador, haciéndola disponible para su uso en la lógica de navegación.

2. Usar componentes Link sin propiedades explícitas de configuración regional

Cuando no se proporciona ninguna propiedad de configuración regional a Link, se utiliza la configuración regional activa 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 la configuración regional actual. Si el usuario está viendo /fr/products, al hacer clic en "About" navega a /fr/about.

3. Crear un helper de enlaces con reconocimiento de localización para control explícito

Para casos donde necesitas control explícito o quieres hacer más visible el manejo de la localización, crea un componente envoltorio que pase explícitamente la localización 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 de la localización y puede extenderse con lógica adicional específica de localización si es necesario.

4. Manejar la navegación programática con preservación de localización

Cuando uses métodos del router directamente, puedes especificar la localización a través de las opciones de transición, o preservar toda la información de enrutamiento incluyendo la localización 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 la localización actual y cualquier parámetro de consulta existente.

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

Utiliza el componente estándar Link en toda tu aplicación, confiando en su comportamiento integrado de preservación de localización.

import Link from "next/link";

export default function ProductCard({ productId }: { productId: string }) {
  return (
    <article>
      <h2>Product {productId}</h2>
      <Link href={`/products/${productId}`}>Ver detalles</Link>
      <Link href="/products">Volver a Productos</Link>
    </article>
  );
}

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