Internacionalización sin fisuras: Equilibrio entre CMS y frontend con Umbraco y Next.js
Umbraco CMS ofrece sólidas funciones de apoyo a la internacionalización, lo que facilita la gestión de sitios web multilingües. Dos características clave son el contenido localizado in situ y los diccionarios.
1. Contenido localizado in situ
El contenido localizado in situ permite a los editores de contenido gestionar versiones en diferentes idiomas del mismo contenido directamente desde la interfaz de Umbraco. Esta función garantiza un proceso optimizado para actualizar y mantener el contenido en varios idiomas sin necesidad de duplicar o sincronizar manualmente el contenido. Los editores pueden cambiar entre idiomas dentro del mismo nodo de contenido, lo que facilita la comparación y garantiza la coherencia.
2. Diccionarios
Los diccionarios de Umbraco proporcionan una forma centralizada de gestionar las traducciones del texto estático utilizado en todo el sitio web, como etiquetas, mensajes de error y otros elementos de la interfaz de usuario. Al definir los elementos del diccionario, los editores pueden mantener las traducciones en una única ubicación, lo que garantiza la coherencia y hace que las actualizaciones sean más eficientes. Cada elemento del diccionario puede tener varias traducciones correspondientes a los distintos idiomas soportados por el sitio.
Estas características permiten a los editores de contenidos ofrecer una experiencia de usuario multilingüe sin fisuras, simplificando el proceso de localización y manteniendo la coherencia entre las distintas versiones lingüísticas del sitio web.
Bibliotecas de internacionalización para Next.js
Next.js no incluye soporte de internacionalización (i18n) de fábrica, pero varias bibliotecas pueden ayudar a los desarrolladores a implementar i18n sin problemas. Estas son algunas de las opciones más populares:
1. next-i18next
- Proporciona una forma sencilla de añadir soporte i18n utilizando el ecosistema i18next.
- Entre sus funciones se incluyen la detección automática de idiomas, las traducciones del lado del servidor y los espacios de nombres dinámicos.
- Ideal para proyectos que requieren una gestión completa de i18n con una configuración mínima.
2. react-intl
- Parte del conjunto FormatJS, diseñado para dar formato a fechas, números y cadenas.
- Proporciona funciones avanzadas de i18n como el formateo de mensajes y la gestión de datos de configuración regional.
- Funciona bien con cualquier aplicación React, incluyendo las construidas con Next.js.
3. next-translate
- Se centra en la simplicidad y el rendimiento.
- Permite cargar traducciones desde archivos estáticos, optimizando los escenarios de exportación estática.
- Admite varias configuraciones regionales y se integra fácilmente con el enrutamiento de Next.js.
Características de `next-intl
Para este sitio web, hemos elegido `next-intl` para gestionar la internacionalización dentro del framework Next.js. Estas son algunas de las características clave que hacen de `next-intl` una buena elección:
1. Integración sencilla
- Se integra fácilmente con Next.js, requiriendo una configuración mínima.
- Utiliza archivos JSON para gestionar las traducciones, por lo que es sencillo añadir y actualizar traducciones.
2. 2. Traducción contextual
- Admite la traducción contextual y dinámica, lo que permite a los desarrolladores adaptar los mensajes en función del estado de la aplicación y las interacciones del usuario.
3. Gestión de configuraciones regionales
- Simplifica la gestión de la configuración regional con ganchos y proveedores integrados.
- Gestiona automáticamente la detección y el enrutamiento de la configuración regional, garantizando que los usuarios vean el contenido en su idioma preferido.
4. Optimizado para el rendimiento
- Diseñado para ser ligero y eficiente, minimizando el impacto en el rendimiento de la aplicación.
- Carga perezosamente las traducciones, reduciendo los tiempos de carga iniciales y mejorando la experiencia del usuario.
5. Compatibilidad con SSR y SSG
- Totalmente compatible con las funciones de renderizado del lado del servidor (SSR) y generación de sitios estáticos (SSG) de Next.js.
- Garantiza que el contenido traducido esté disponible en el momento de la compilación, lo que mejora el SEO y el rendimiento de la carga.
Conclusiones
Optamos por aprovechar las funciones listas para usar de Umbraco para gestionar contenido localizado tanto para elementos de contenido como para elementos de diccionario. La API de entrega de Umbraco entrega el contenido localizado a los clientes headless. Escribimos un simple servicio rest para exponer los elementos del diccionario. Utilizamos next-intl principalmente para gestionar la configuración regional. Esto incluyó la identificación de la configuración regional actual de las diferentes ubicaciones del sitio web y pasar la configuración regional con las solicitudes de contenido y los elementos del diccionario a Umbraco.
Anticipamos escribir más artículos en profundidad sobre los aspectos técnicos de la aplicación de estas características, junto con artículos relacionados con la automatización del proceso de traducción. Vuelve pronto.
