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

Clase 10 de 24 • Curso de Next.js Avanzado

Clase anteriorSiguiente clase

Resumen

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.