Internacionalización de Idiomas con Next.js y Cookies

¿Cómo gestionar la internacionalización en Next.js?

La internacionalización en un sitio web es crucial para mejorar la experiencia del usuario, permitiendo mostrar el contenido en el idioma preferido del visitante. Next.js facilita este proceso con características incorporadas que detectan automáticamente el idioma del usuario, gestionan transiciones entre enlaces, y permiten configuraciones personalizadas. Veremos cómo estos elementos funcionan y cómo puedes implementarlos en tu proyecto con Next.js.

¿Cómo se detecta automáticamente el idioma en Next.js?

Next.js incluye una funcionalidad que detecta automáticamente el idioma del usuario. Esto se logra a través de un encabezado específico, denominado Accept-Language. Los navegadores envían este encabezado basándose en las configuraciones lingüísticas del sistema operativo o del mismo navegador del usuario. Al leer este encabezado, Next.js asigna el valor correspondiente a la propiedad locale, que determina el idioma del sitio.

Puedes desactivar la detección automática configurando el archivo next.config.js de la siguiente manera:

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

Si localeDetection se establece en true o si no está definido, Next.js realizará la detección automáticamente.

¿Cómo manejar las transiciones de enlaces entre idiomas?

La navegación entre páginas en diferentes idiomas puede ser un desafío, pero Next.js proporciona herramientas para manejarlo eficientemente. Al usar NextLink, siempre se navegará al idioma que está configurado por defecto. Sin embargo, puedes cambiar esto utilizando Router.push.

Supongamos que quieres cambiar a otro idioma de forma programática. Puedes hacerlo usando Router.push de la siguiente manera:

import { useRouter } from 'next/router';

const ChangeLanguage = () => {
  const router = useRouter();

  const changeToEnglish = () => {
    router.push('/new-page', '/new-page', { locale: 'en' });
  };
  
  return (
    <button onClick={changeToEnglish}>Change to English</button>
  );
};

¿Cómo se utilizan las cookies para controlar el idioma del usuario?

Además de la detección automática, Next.js te permite controlar el idioma mediante cookies. Una cookie denominada next.locale se puede configurar para almacenar las preferencias de idioma del usuario. Esto puede sobreescribir la detección automática según las preferencias del usuario.

Imagina que tienes una opción en la parte superior del sitio que permite a los usuarios elegir entre inglés y español. Cuando un usuario selecciona su idioma preferido, actualizas el valor de next.locale con este idioma, y Next.js lo usará para toda la sesión:

document.cookie = "next.locale=es; path=/; max-age=31536000"; // 1 año

También puedes utilizar APIs de Next.js para manejar la configuración de cookies y sincronizarla con React, asegurando que las preferencias se mantengan incluso al cambiar páginas o tras recargar.

¿Qué pasos seguir para implementar un selector de idioma?

1. Crear el menú de selección: Diseña un menú donde los usuarios elijan entre los idiomas disponibles.
2. Actualizar las cookies: Al seleccionar un idioma, actualiza la cookie next.locale para guardar esta preferencia.
3. Sincronizar con React: Usa las APIs de Next.js para comunicar cambios de idioma con tus componentes React y reflejar la preferencia seleccionada.

Este proceso no solo mejora la experiencia del usuario, sino que también te permite personalizar y controlar dinámicamente el contenido del sitio, adaptándolo a las necesidades de tus visitantes. ¡Anímate a implementarlo en tu proyecto!