Internacionalización en NextJS: Middleware y Rutas Dinámicas

La internacionalización en aplicaciones web es crucial para garantizar una experiencia fluida para usuarios de distintos idiomas. Aquí exploramos cómo implementar internacionalización desde cero en Next.js, utilizando middleware y JavaScript nativo, para redirigir usuarios según su idioma configurado sin depender de librerías externas.

¿Cómo interceptar y procesar solicitudes en Next.js con middleware?

• El middleware en Next.js permite interceptar solicitudes entre el cliente y el servidor.
• Podemos usar el objeto request.nextUrl para analizar la URL solicitada y tomar decisiones como redirecciones o bloqueos.
• La lógica incluye:
  • Ignorar solicitudes fuera de la subpágina destinada a la internacionalización (/i18n en este caso).
  • Permitir el paso directo si la URL ya contiene un identificador de idioma soportado (e.g., /i18n/es o /i18n/en).
  • Redirigir solicitudes sin identificador de idioma al idioma más adecuado según la configuración del usuario.

¿Cómo determinar el idioma preferido del usuario?

• Usamos el encabezado HTTP Accept-Language, que los navegadores envían indicando los idiomas preferidos del usuario.
• Con la librería negotiator y format.js, se pueden:
  • Extraer los idiomas aceptados por el navegador.
  • Comparar con los idiomas soportados por la aplicación (es, en).
  • Seleccionar el idioma por defecto (es) en caso de que no haya coincidencias.

¿Cómo se estructura la lógica para redirecciones en el middleware?

1. Ignorar rutas irrelevantes:

   • Verificar si la ruta solicitada comienza con /i18n.
   • Si no, dejar que la solicitud continúe sin modificaciones.

2. Permitir rutas con idioma configurado:

   • Analizar si la URL contiene un idioma soportado.
   • Si es positivo, permitir que la solicitud continúe.

3. Redirigir rutas sin idioma configurado:

   • Determinar el idioma usando el encabezado Accept-Language.
   • Modificar el pathname de la solicitud para incluir el idioma.
   • Realizar la redirección basada en esta nueva URL.

¿Cómo probar la implementación?

• Cambiar el idioma preferido en las configuraciones del navegador.
• Acceder a la página raíz y verificar la redirección automática al idioma correspondiente.
• Probar con idiomas no soportados para asegurar que se asigna el idioma por defecto.