Creación:2025-01-02Última actualización:2025-06-29

Referencia esta doc a tu asistente AI favorito

Haz tu pregunta y obtén un resumen del documento referenciando esta página y el proveedor AI de tu elección

El contenido de esta página ha sido traducido con una IA.

Ver la última versión del contenido original en inglés

Editar esta documentación

Si tienes una idea para mejorar esta documentación, no dudes en contribuir enviando una pull request en GitHub.

Enlace de GitHub a la documentación

Copiar

Copiar el Markdown del documento a la portapapeles

react-Intl VS react-i18next VS intlayer | Internacionalización (i18n) en React

Esta guía compara tres opciones consolidadas de i18n para React: react-intl (FormatJS), react-i18next (i18next) y Intlayer. Nos centramos en aplicaciones de React puro (por ejemplo, Vite, CRA, SPA). Si usas Next.js, consulta nuestra comparación dedicada a Next.js.

Evaluamos:

Arquitectura y organización del contenido
TypeScript y seguridad
Manejo de traducciones faltantes
Contenido enriquecido y capacidades de formato
Rendimiento y comportamiento de carga
Experiencia del desarrollador (DX), herramientas y mantenimiento
SEO/ruteo (dependiente del framework)

resumen: Los tres pueden localizar una aplicación React. Si quieres contenido con alcance por componente, tipos estrictos en TypeScript, verificaciones de claves faltantes en tiempo de compilación, diccionarios optimizados por tree-shaking y herramientas editoriales integradas (Editor Visual/CMS + traducción asistida por IA opcional), Intlayer es la opción más completa para bases de código React modulares.

Posicionamiento a alto nivel

react-intl - Formateo basado en ICU y alineado con estándares (fechas/números/plurales) con una API madura. Los catálogos suelen estar centralizados; la seguridad de las claves y la validación en tiempo de compilación dependen en gran medida de ti.
react-i18next - Extremadamente popular y flexible; namespaces, detectores y muchos plugins (ICU, backends). Potente, pero la configuración puede expandirse a medida que los proyectos crecen.
Intlayer - Modelo de contenido centrado en componentes para React, tipado estricto en TS, verificaciones en tiempo de compilación, tree-shaking, además de Editor Visual/CMS y traducciones asistidas por IA. Funciona con React Router, Vite, CRA, etc.

Matriz de características (enfoque React)

Mostrar todo el contenido de la tabla

Abrir la tabla en una ventana flotante para ver todo el contenido claramente

Característica	`react-intlayer` (Intlayer)	`react-i18next` (i18next)	`react-intl` (FormatJS)
Traducciones Cerca de los Componentes	✅ Sí, contenido ubicado junto a cada componente	❌ No	❌ No
Integración con TypeScript	✅ Avanzada, tipos estrictos generados automáticamente	⚠️ Básica; configuración extra para seguridad	✅ Buena, pero menos estricta
Detección de Traducciones Faltantes	✅ Resaltado de errores en TypeScript y error/advertencia en tiempo de compilación	⚠️ Principalmente cadenas de reserva en tiempo de ejecución	⚠️ Cadenas de reserva
Contenido Enriquecido (JSX/Markdown/componentes)	✅ Soporte directo	⚠️ Limitado / solo interpolación	⚠️ Sintaxis ICU, no JSX real
Traducción impulsada por IA	✅ Sí, soporta múltiples proveedores de IA. Usable con tus propias claves API. Considera el contexto de tu aplicación y el alcance del contenido	❌ No	❌ No
Editor Visual	✅ Sí, Editor Visual local + CMS opcional; puede externalizar contenido de la base de código; embebible	❌ No / disponible a través de plataformas externas de localización	❌ No / disponible a través de plataformas externas de localización
Enrutamiento Localizado	✅ Sí, soporta rutas localizadas desde el inicio (funciona con Next.js y Vite)	⚠️ No incorporado, requiere plugins (p. ej. `next-i18next`) o configuración personalizada del enrutador	❌ No, solo formateo de mensajes, el enrutamiento debe ser manual
Generación Dinámica de Rutas	✅ Sí	⚠️ Plugin/ecosistema o configuración manual	❌ No proporcionado
Pluralización	✅ Patrones basados en enumeraciones	✅ Configurable (plugins como i18next-icu)	✅ (ICU)
Formateo (fechas, números, monedas)	✅ Formateadores optimizados (Intl en el núcleo)	⚠️ A través de plugins o uso personalizado de Intl	✅ Formateadores ICU
Formato de contenido	✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml en desarrollo)	⚠️ .json	✅ .json, .js
Soporte ICU	⚠️ En desarrollo	⚠️ A través de plugin (i18next-icu)	✅ Sí
Ayudantes SEO (hreflang, sitemap)	✅ Herramientas integradas: ayudantes para sitemap, robots.txt, metadatos	⚠️ Plugins comunitarios/manual	❌ No es núcleo
Ecosistema / Comunidad	⚠️ Más pequeño pero creciendo rápido y reactivo	✅ Más grande y maduro	✅ Grande
Renderizado del lado del servidor y Componentes del Servidor	✅ Sí, optimizado para SSR / Componentes del Servidor de React	⚠️ Soportado a nivel de página pero es necesario pasar funciones t en el árbol de componentes para los componentes hijos del servidor	❌ No soportado, es necesario pasar funciones t en el árbol de componentes para los componentes hijos del servidor
Tree-shaking (cargar solo contenido usado)	✅ Sí, por componente en tiempo de compilación mediante plugins de Babel/SWC	⚠️ Usualmente carga todo (puede mejorarse con namespaces/división de código)	⚠️ Usualmente carga todo
Carga diferida	✅ Sí, por localización / por diccionario	✅ Sí (por ejemplo, backends/namespaces bajo demanda)	✅ Sí (paquetes de localización divididos)
Eliminación de contenido no usado	✅ Sí, por diccionario en tiempo de compilación	❌ No, solo mediante segmentación manual de namespaces	❌ No, todos los mensajes declarados se incluyen en el paquete
Gestión de Proyectos Grandes	✅ Fomenta la modularidad, adecuado para sistemas de diseño	⚠️ Requiere buena disciplina en los archivos	⚠️ Los catálogos centrales pueden volverse grandes

Comparación detallada

1) Arquitectura y escalabilidad

react-intl / react-i18next: La mayoría de las configuraciones mantienen carpetas de localización centralizadas por idioma, a veces divididas por espacios de nombres (namespaces) (i18next). Funciona bien al principio, pero se convierte en una superficie compartida a medida que las aplicaciones crecen.
Intlayer: Promueve diccionarios por componente (o por funcionalidad) ubicados junto a la interfaz de usuario a la que sirven. Esto mantiene clara la propiedad, facilita la duplicación/migración de componentes y reduce la rotación de claves entre equipos. El contenido no utilizado es más fácil de identificar y eliminar.

Por qué importa: El contenido modular refleja una interfaz modular. Las grandes bases de código React se mantienen más limpias cuando las traducciones conviven con los componentes a los que pertenecen.

2) TypeScript y seguridad

react-intl: Tipados sólidos, pero sin tipado automático de claves; debes aplicar los patrones de seguridad tú mismo.
react-i18next: Tipados fuertes para hooks; el tipado estricto de claves generalmente requiere configuración adicional o generadores.
Intlayer: Genera automáticamente tipos estrictos a partir de tu contenido. La autocompletación del IDE y los errores en tiempo de compilación detectan errores tipográficos y claves faltantes antes de la ejecución.

Por qué es importante: Mover los fallos hacia la izquierda (a la compilación/CI) reduce problemas en producción y acelera los ciclos de retroalimentación para los desarrolladores.

3) Manejo de traducciones faltantes

react-intl / react-i18next: Por defecto usan respaldo en tiempo de ejecución (eco de la clave o idioma predeterminado). Puedes agregar linting/plugins, pero no está garantizado en la compilación.
Intlayer: Detección en tiempo de compilación con advertencias o errores cuando faltan locales o claves requeridas.

Por qué es importante: Que la CI falle por cadenas faltantes evita que “inglés misterioso” se filtre en interfaces no inglesas.

4) Contenido enriquecido y formato

react-intl: Excelente soporte ICU para plurales, selectores, fechas/números y composición de mensajes. Se puede usar JSX, pero el modelo mental sigue siendo centrado en el mensaje.
react-i18next: Interpolación flexible y <Trans> para incrustar elementos/componentes; ICU disponible mediante un plugin.
Intlayer: Los archivos de contenido pueden incluir nodos enriquecidos (JSX/Markdown/componentes) y metadatos. El formateo utiliza Intl internamente; los patrones de plural son ergonómicos.

Por qué es importante: Los textos complejos de la interfaz de usuario (enlaces, partes en negrita, componentes en línea) son más fáciles cuando la biblioteca integra nodos React de forma limpia.

5) Rendimiento y comportamiento de carga

react-intl / react-i18next: Normalmente gestionas el división de catálogos y la carga diferida manualmente (espacios de nombres/importaciones dinámicas). Efectivo pero requiere disciplina.
Intlayer: Realiza tree-shaking de diccionarios no usados y soporta carga diferida por diccionario/por localización de forma nativa.

Por qué importa: Paquetes más pequeños y menos cadenas no usadas mejoran el rendimiento de inicio y navegación.

6) DX, herramientas y mantenimiento

react-intl / react-i18next: Ecosistema comunitario amplio; para flujos editoriales usualmente adoptas plataformas de localización externas.
Intlayer: Incluye un Editor Visual gratuito y un CMS opcional (mantén el contenido en Git o externalízalo). También ofrece una extensión para VSCode para la creación de contenido y traducción asistida por IA usando tus propias claves de proveedor.

Por qué es importante: Las herramientas integradas acortan el ciclo entre desarrolladores y autores de contenido - menos código de unión, menos dependencias de proveedores.

¿Cuándo elegir cuál?

Elige react-intl si quieres un formateo de mensajes priorizando ICU con una API sencilla y alineada con estándares, y tu equipo está cómodo manteniendo catálogos y verificaciones de seguridad manualmente.
Elige react-i18next si necesitas la amplitud del ecosistema de i18next (detectores, backends, plugin ICU, integraciones) y aceptas más configuración para ganar flexibilidad.
Elige Intlayer si valoras el contenido acotado por componente, TypeScript estricto, garantías en tiempo de compilación, tree-shaking y herramientas editoriales incluidas por defecto, especialmente para aplicaciones React grandes y modulares.

Notas prácticas para la migración (react-intl / react-i18next → Intlayer)

Migra de forma incremental: Comienza con una funcionalidad o ruta; mantén los catálogos heredados en paralelo durante la transición.
Adopta diccionarios por componente: Ubica el contenido junto con los componentes para reducir el acoplamiento.
Activa verificaciones estrictas: Permite que los errores en tiempo de compilación detecten claves/locales faltantes temprano en CI.
Mide los bundles: Espera reducciones a medida que se eliminan cadenas no usadas.

Conclusión

Las tres bibliotecas localizan React de manera efectiva. La diferencia radica en cuánto infraestructura debes construir para alcanzar una configuración segura y escalable:

Con Intlayer, el contenido modular, la tipificación estricta en TS, la seguridad en tiempo de compilación, los paquetes optimizados por tree-shaking y las herramientas editoriales son valores predeterminados, no tareas.
Si tu equipo valora la mantenibilidad y la velocidad en aplicaciones React impulsadas por componentes y con múltiples locales, Intlayer ofrece el flujo de trabajo para desarrolladores y contenido más completo en la actualidad.

next-i18next vs next-intl vs Intlayer