Internacionalización de Idiomas con Next.js y Cookies

Lograr que un sitio web detecte el idioma del usuario y le permita cambiarlo de forma fluida es uno de los pilares de una buena experiencia de internacionalización. Next.js ofrece herramientas integradas que simplifican enormemente este proceso, desde la detección automática del idioma hasta el manejo de navegación entre locales y la persistencia de preferencias mediante cookies.

¿Cómo detecta Next.js el idioma del usuario de forma automática?

Next.js realiza la detección automática del idioma leyendo un header HTTP llamado accept-language [0:36]. Este header es enviado por el navegador y su valor depende de la configuración del idioma que el usuario tenga en su sistema operativo o en el propio navegador.

A partir de ese header, Next.js asigna el valor a la propiedad locale que se utiliza en la aplicación. Esto significa que, sin escribir código adicional, el sitio puede mostrar el contenido en el idioma preferido del visitante.

Si por alguna razón esta funcionalidad no es conveniente para tu proyecto, puedes deshabilitarla en el archivo next.config.js [1:10]:

js module.exports = { i18n: { localeDetection: false, }, };

• Si localeDetection es true o no está definido, la detección se realiza de forma automática.
• Si se establece en false, Next.js dejará de leer el header accept-language.

¿Cómo controlar la navegación entre idiomas con Next.js?

Uno de los aspectos más importantes de la internacionalización es garantizar que el usuario no cambie de idioma inesperadamente al hacer clic en un enlace. Next.js se encarga de esto: el componente next/link siempre navega al locale activo por defecto [1:28].

¿Cómo forzar el cambio de idioma con router.push?

Cuando necesitas que el usuario pase de un idioma a otro de forma programática, puedes usar router.push con un objeto de configuración adicional [1:48]:

js router.push('/about', '/about', { locale: 'pt-BR' });

Esto hace que la navegación se salte el locale actual y lleve directamente al locale especificado, en este caso portugués de Brasil.

¿Cómo evitar que un enlace cambie de idioma?

Si tienes un enlace que apunta a una ruta con prefijo de otro idioma, como /br/about-us, puedes forzar a que se mantenga en el locale actual usando la opción locale en false [2:11]:

jsx

<Link href="/br/about-us" locale={false}> About Us </Link>

De esta forma, Next.js ignora el prefijo del idioma en la URL y conserva el locale configurado actualmente.

¿Cómo persistir la preferencia de idioma con cookies?

Next.js ofrece aún más flexibilidad a través de una cookie llamada NEXT_LOCALE [2:34]. Esta cookie permite guardar la preferencia de idioma del usuario y tiene prioridad sobre la detección automática del header accept-language.

El flujo típico funciona así:

• Se muestra un menú en la parte superior del sitio con las opciones de idioma disponibles.
• Cuando el usuario selecciona un idioma, se actualiza el valor de la cookie NEXT_LOCALE.
• En las siguientes visitas o navegaciones, Next.js utiliza el valor de esta cookie como locale activo.

Para implementar esta funcionalidad se recomienda crear una API route en Next.js que se encargue de setear la cookie y luego comunicar ese cambio desde el componente de React [3:18]. Esto mantiene la lógica limpia y separada del frontend.

js // pages/api/set-locale.js import { setCookie } from 'cookies'; // ejemplo simplificado

export default function handler(req, res) { const { locale } = req.body; res.setHeader('Set-Cookie', NEXT_LOCALE=${locale}; Path=/;); res.status(200).json({ locale }); }

Este patrón es similar al que se usa para manejar el preview mode de un CMS con Next.js, donde las cookies permiten mantener el estado de la sesión del usuario.

Si quieres poner en práctica todo esto, intenta agregar un selector de idioma en tu sitio que alterne entre inglés y español, guardando la preferencia en NEXT_LOCALE. Comparte tu resultado y cualquier duda que surja en el proceso.