Internacionalización en NextJS: Configuración y Estrategias de Rutas

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

La internacionalización en Next.js es un aspecto crucial para quienes desean expandir sus aplicaciones a un público global. Al adaptar tu proyecto para diferentes lenguajes y localidades, aseguras una experiencia más inclusiva y accesible para usuarios de diversas culturas. En este artículo te explicaremos cómo implementar la internacionalización en Next.js y cómo integrar estas funcionalidades con Contentful, un popular sistema de gestión de contenidos (CMS).

¿Cuáles son las estrategias para rutas internacionalizadas en Next.js?

En Next.js contamos con dos enfoques principales para manejar rutas internacionalizadas:

1. Subpath Routing (Enrutamiento por subruta): Este método utiliza la estructura de URL en donde el "locale" se incluye antes de la ruta principal. Por ejemplo, un sitio podría tener una ruta como misitio.com/en/page, donde en representa el idioma inglés.

2. Domain Routing (Enrutamiento por dominio): Cada "locale" tiene su propio dominio. Supón que manejas un sitio llamado nuncaparesdeaprender.com, necesitarías adquirir dominios como nuncaparesdeaprender.es para soportar español o nuncaparesdeaprender.fr para francés. Este enfoque puede resultar más costoso, ya que implica la compra de varios dominios.

Para fines educativos y facilidad en localhost, se recomienda usar el Subpath Routing.

¿Cómo configurar Next.js para soportar múltiples locales?

Para configurar Next.js con múltiples locales, sigue estos pasos en el archivo next.config.js:

module.exports = {
  i18n: {
    locales: ['en-US', 'es'], // Define los locales soportados.
    defaultLocale: 'en-US',   // Establece el local por defecto.
  },
}

• Locales: Lista de todos los locales que desea soportar.
• Default Locale: El idioma por defecto cuando no se especifica ninguno por el navegador.

¿Cómo integrar Contentful con locales en Next.js?

La integración de Contentful con Next.js para manejar diferentes locales es sencilla pero requiere algunos pasos importantes:

1. Configurar locales en Contentful:

   • Dirígete a la sección de "Locales" en tu cuenta de Contentful.
   • Asegúrate de que los locales coincidan con los configurados en Next.js.
   • Establece un "Fallback Locale", que Contentful usará si no se encuentra la traducción en el idioma solicitado.

2. Realizar consultas con GraphQL:

   • Puedes usar el Playground de GraphQL en Contentful para ver cómo se devuelven los datos en diferentes idiomas. Al realizar una consulta, incluye el parámetro de locale para especificar el idioma deseado.

   query {
     plant(id: "example-id", locale: "es") {
       nombre
     }
   }
   

¿Qué pasos seguir para habilitar locales en Contentful?

• Elige un nombre válido para el local y asegúrate de habilitarlo en las respuestas de la API.
• Configura el "Fallback Locale" para que Contentful devuelva el contenido en otro idioma si no hay traducción.
• Habilita todos los checks necesarios para editar contenido en diferentes locales.

Prueba y verificación

Con todo configurado, será esencial realizar pruebas para verificar que Next.js y Contentful están interconectados correctamente y que el contenido se localiza adecuadamente. Nuevamente usa el playground de GraphQL para probar las consultas en distintos idiomas y verifica que la información coincida con las traducciones deseadas.

Este proceso no solo facilita el manejo de contenido multilingüe, sino que también asegura una experiencia de usuario fluida y satisfactoria a nivel internacional. Mantén siempre consistencia en tus configuraciones entre tu servidor, CMS y Next.js para evitar inconvenientes. ¡Con estos pasos estarás listo para llevar tu proyecto a audiencias globales!