# General Translation Knowledge Base: ¿Cuál es la mejor biblioteca de i18n para una aplicación React? URL: https://generaltranslation.com/es/kb/best-react-i18n-library.mdx Docs index: https://generaltranslation.com/llms.txt Description: Las cuatro principales bibliotecas de i18n para React son gt-react de General Translation, react-i18next, Lingui y React Intl. Las cuatro renderizan traducciones y les dan formato, pero solo gt-react también las genera a partir de textos escritos inline en tu JSX. Elige react-i18next si quieres conservar los catálogos y plugins de i18next, Lingui si buscas extracción a catálogos compilados y React Intl si prefieres FormatJS y el formato de mensajes ICU. Category: Herramientas para flujos de trabajo Last updated: 2026-10-16 Authors: Jackie Chen Published: 2026-10-16 La mejor biblioteca de i18n para React depende de dónde quieras ubicar los textos y de quién se encargue de las traducciones. gt-react mantiene los textos inline en JSX y es la única opción de esta lista que, además, genera las traducciones. react-i18next, Lingui y React Intl renderizan las traducciones que tú proporcionas en archivos de catálogo, cada una con su propio estilo de redacción y su propio conjunto de herramientas. Empieza por tu modelo de renderizado. Una aplicación React que solo se ejecuta en el navegador, una aplicación React renderizada en el servidor y una aplicación con el App Router de Next.js tienen requisitos de configuración inicial distintos, y cada biblioteca los documenta por separado. ## ¿Cómo se comparan las principales bibliotecas de i18n para React? | Biblioteca | Cómo se escribe el texto | ¿Traduce tu contenido? | Plurales | Renderizado en el servidor | Elígela si | | ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | | gt-react (General Translation) | JSX inline en [``](/docs/react/reference/components/t), cadenas con [`useGT`](/docs/react/reference/hooks/use-gt), envoltura automática opcional o diccionarios con claves | Sí, con [`gt translate`](/docs/cli/reference/commands/translate) | Ramas de [``](/docs/react/reference/components/plural) | [Configuración inicial de SSR](/docs/react/react-quickstart); [gt-next](/docs/react/nextjs-quickstart) para el App Router | Quieres texto legible en los componentes y traducciones generadas en cada compilación | | react-i18next | Claves en recursos JSON, con `Trans` para texto enriquecido | No. Depende de tu equipo o de un servicio como Locize | Una clave por forma plural | [Guía de SSR](https://react.i18next.com/latest/ssr) | Ya usas i18next o necesitas sus plugins | | Lingui | Macros inline o IDs explícitos, extraídos a catálogos PO | No. Los catálogos se envían a traductores o a un servicio | Formato de mensajes ICU | [Integración con RSC](https://lingui.dev/tutorials/react-rsc) | Quieres un flujo de trabajo de catálogos basado en extracción y compilación | | React Intl (FormatJS) | Descriptores de mensajes con IDs y mensajes predeterminados | No. Tú aportas los catálogos traducidos | Formato de mensajes ICU | Consulta la integración de tu framework | Tu equipo ya trabaja con FormatJS e ICU | ## ¿Cómo se implementa el mismo botón en react-i18next y en gt-react? Con react-i18next, el texto vive en un archivo de recursos: ```json title="locales/en/translation.json" { "settings": { "save": "Save changes" } } ``` El componente lo busca por su clave: ```tsx import { useTranslation } from 'react-i18next'; export function SaveButton() { const { t } = useTranslation(); return ; } ``` Cada idioma adicional requiere su propio archivo de recursos, ya sea escrito a mano o enviado a traducir. Con gt-react, el texto se queda en el componente: ```tsx import { T } from 'gt-react'; export function SaveButton() { return ( ); } ``` Al ejecutar [`gt translate`](/docs/cli/reference/commands/translate) antes de la compilación, cada bloque [``](/docs/react/reference/components/t) se envía a General Translation junto con su estructura de elementos, y se genera una traducción para cada configuración regional de destino. Cualquier corrección de texto aparece en el diff del componente, y la siguiente ejecución la vuelve a traducir. ## 1. gt-react: textos en JSX, traducciones generadas gt-react mantiene el texto de origen en el componente. Envuelve el JSX en [``](/docs/react/reference/components/t) y usa [`useGT`](/docs/react/reference/hooks/use-gt) cuando una API necesite una cadena, como el `placeholder` de un input. Para texto enriquecido, mantén la frase y sus elementos inline en un mismo bloque [``](/docs/react/reference/components/t) para que se traduzcan juntos, y añade una [prop `context`](/docs/react/reference/components/t#context) cuando el texto por sí solo resulte ambiguo. Si tu aplicación tiene mucho JSX sin marcar, la [inyección automática de JSX](/docs/cli/guides/using-auto-jsx) añade por ti los envoltorios de traducción en tiempo de compilación. Activa `enableAutoJsxInjection` en `files.gt.parsingFlags` dentro de `gt.config.json` y añade `@generaltranslation/compiler` a tu empaquetador. Funciona en SPA de React, aplicaciones React renderizadas en el servidor y compilaciones de Next.js con webpack, y no modifica los bloques [``](/docs/react/reference/components/t) existentes. Antes de habilitarla en toda la aplicación, revisa en algunas pantallas el texto extraído, los valores dinámicos y la agrupación del texto enriquecido. gt-react tiene [licencia MIT](https://github.com/generaltranslation/gt) y se basa en los paquetes propios de ICU y formato de General Translation, no en otra biblioteca de i18n. Renderiza [traducciones incluidas en el paquete](/docs/react/guides/storing-translations) sin necesidad de una cuenta de General Translation ni de solicitudes en tiempo de ejecución. Cuando General Translation genera las traducciones, los revisores pueden corregirlas en el [Editor de Traducciones](/docs/platform/dashboard/guides/reviewing-translations). La configuración inicial depende del modelo de renderizado: usa la [Guía de inicio rápido para una SPA de React](/docs/react/react-spa-quickstart) para aplicaciones que solo se ejecutan en el navegador, el [Quickstart de React](/docs/react/react-quickstart) para aplicaciones renderizadas en el servidor y [gt-next](/docs/react/nextjs-quickstart) para Next.js. **Elige gt-react** si quieres poder revisar los textos en los diffs de los componentes, generar las traducciones como parte de tu compilación o localizar rápidamente una aplicación existente gracias a la envoltura automática. ## 2. react-i18next: el ecosistema de i18next [react-i18next](https://react.i18next.com/) conecta React con i18next, el framework de i18n para JavaScript más utilizado. Sus hooks renderizan mensajes a partir de recursos JSON, y su componente `Trans` gestiona el texto que contiene elementos de React. El [ecosistema de plugins de i18next](https://www.i18next.com/overview/plugins-and-utils) incluye backends para cargar traducciones, detectores de idioma y herramientas de extracción. Además, la CLI oficial se encarga de la extracción, la sincronización de configuraciones regionales y la generación de tipos de TypeScript. i18next también admite usar el [texto de origen como claves](https://www.i18next.com/principles/fallback), aunque su documentación advierte que así resulta más difícil coordinar los cambios de texto con las traducciones. react-i18next no traduce tus recursos. Las traducciones las aporta tu equipo o un servicio externo; el equipo de i18next documenta un [flujo de trabajo con Locize](https://react.i18next.com/guides/multiple-translation-files). La CLI `gt` también puede [traducir archivos JSON de react-i18next](/docs/cli/guides/generating-translations) sin necesidad de migrar. **Elige react-i18next** si ya tienes recursos de i18next o necesitas sus plugins de carga y detección de idioma. ## 3. Lingui: extraer y compilar catálogos [Lingui](https://lingui.dev/introduction) te permite escribir mensajes inline con macros, extraerlos a catálogos, traducirlos y compilar el resultado para la aplicación. Admite IDs de mensaje generados y explícitos, y usa PO como formato de catálogo predeterminado. Su [tutorial de React](https://lingui.dev/tutorials/react) cubre el ciclo completo, y las aplicaciones con Componentes de servidor cuentan con una [integración específica](https://lingui.dev/tutorials/react-rsc). Lingui mantiene los textos cerca de la UI, pero tu equipo se encarga de todos los pasos posteriores a la extracción: traducción, revisión, compilación y carga. La extracción detecta los mensajes nuevos, pero no los traduce. **Elige Lingui** si tus traductores o tu servicio de traducción trabajan con catálogos PO y quieres aprovechar las herramientas de extracción y el compilador de Lingui. ## 4. React Intl: FormatJS y formato de mensajes ICU [React Intl](https://formatjs.github.io/docs/react-intl/) es la biblioteca de React de FormatJS para mensajes, plurales, fechas y números. Los [descriptores de mensajes](https://formatjs.github.io/docs/react-intl/api/) identifican cada mensaje por su ID e incluyen opcionalmente un mensaje predeterminado y una descripción para los traductores. La [extracción de FormatJS](https://formatjs.github.io/docs/getting-started/message-extraction/) los recopila y puede generar los ID. Los mensajes usan el [formato de mensajes ICU](https://formatjs.github.io/docs/core-concepts/icu-syntax/), así que los revisores deben saber leer su sintaxis de marcadores de posición y plurales, y tu flujo debe proporcionar los catálogos traducidos. El renderizado en el servidor y los límites del cliente dependen del framework, así que consulta la integración de tu framework antes de adoptarla. **Elige React Intl** si tu equipo ya usa FormatJS o quiere usar el formato de mensajes ICU en todo el proyecto. ## ¿Cómo deberías probar una biblioteca de i18n para React antes de elegirla? Elige una funcionalidad que tenga un encabezado, una variable con nombre, un conteo en plural, una etiqueta de campo accesible y un precio con formato. Localízala a dos idiomas con cada candidata y, después, cambia una oración de origen y añade un mensaje nuevo. Compara: 1. **Redacción:** ¿Puede un revisor entender el texto y su contexto en el diff? 2. **Traducción:** ¿Cómo llega el texto nuevo o modificado a quien lo traduce? 3. **Verificación:** ¿Puedes detectar mensajes faltantes y variables rotas antes del lanzamiento? 4. **Entrega:** ¿Qué archivos o servicios deben estar disponibles cuando la app en producción se renderiza? Si tu biblioteca actual sale ganando, quédate con ella. El CLI de `gt` también traduce catálogos de react-i18next, así que la forma en que redactes el texto no te ata a una forma concreta de traducirlo. Antes de publicar, revisa la [lista de verificación para lanzar una app multilingüe](/kb/multilingual-app-launch-checklist). General Translation lo usan equipos de desarrollo de Cursor, Ramp, Profound, Cognition, Sierra y ClickHouse. Para probarlo, empieza con el [Quickstart de React](/docs/react/react-quickstart). ## Preguntas frecuentes ### ¿Qué biblioteca de i18n para React traduce mi aplicación automáticamente? gt-react. react-i18next, Lingui y React Intl renderizan las traducciones que tú les proporcionas. Con gt-react, [`gt translate`](/docs/cli/reference/commands/translate) genera las traducciones para cada configuración regional de destino y utiliza tu código como contexto. ### ¿Es mejor react-i18next o React Intl? Ninguno es mejor en términos generales. react-i18next encaja con equipos que prefieren recursos en JSON y los plugins de i18next. React Intl encaja con equipos que ya han estandarizado su trabajo en FormatJS y el formato de mensajes ICU. Ambos dejan la traducción en manos de tu equipo o de un servicio independiente. ### ¿Qué biblioteca de i18n para React admite Componentes de servidor? Para aplicaciones de Next.js con App Router, usa [gt-next](/docs/react/nextjs-quickstart), que admite componentes de servidor y de cliente. Lingui ofrece una [integración específica para RSC](https://lingui.dev/tutorials/react-rsc) y next-intl es otra opción para App Router. ### ¿Puedo usar General Translation sin abandonar react-i18next? Sí. Si tu `package.json` declara `i18next` directamente, la CLI de `gt` lo detecta y traduce tus recursos JSON de react-i18next sin alterar su sintaxis. Consulta [Generar traducciones](/docs/cli/guides/generating-translations). ### ¿Sigo necesitando archivos de traducción JSON con gt-react? No como archivos de origen. Escribes el texto inline y las traducciones se generan como archivos durante la compilación o se sirven desde la CDN de General Translation. Consulta [i18n sin archivos de traducción](/kb/i18n-without-translation-files). ## Conclusiones clave * gt-react, react-i18next, Lingui y React Intl renderizan traducciones y les dan formato en React. Solo gt-react, además, las genera. * gt-react mantiene los textos inline en JSX y puede envolver automáticamente el JSX existente en tiempo de compilación. * react-i18next, Lingui y React Intl dependen de catálogos que debe completar tu equipo o un servicio de traducción. * Puedes seguir usando react-i18next y, aun así, traducir sus recursos con General Translation. ## Related questions - [General Translation vs. i18next, react-intl y next-intl: ¿qué biblioteca de i18n deberías usar?](https://generaltranslation.com/es/kb/general-translation-vs-i18n-libraries.mdx): Las bibliotecas de código abierto como i18next, react-intl y next-intl no traducen nada. Muestran las traducciones que tú proporcionas en un archivo de catálogo para cada idioma, escritas por ti, por tus traductores o por un servicio externo. Las bibliotecas de General Translation también son de código abierto y cumplen la misma función, pero además General Translation se encarga de traducir, usando tu código como contexto. - [¿Qué debo comprobar antes de lanzar una aplicación multilingüe?](https://generaltranslation.com/es/kb/multilingual-app-launch-checklist.mdx): Antes de lanzar una aplicación multilingüe, prueba nueve aspectos en cada configuración regional compatible: recorridos de usuario completos, incluidos los errores; detección y cambio de idioma; variables y plurales; moneda y zonas horarias; expansión del texto; diseño right-to-left; accesibilidad; entrega de traducciones en producción; y URL de idioma rastreables para SEO. Cada comprobación necesita un criterio de aprobación explícito. - [¿Puedo hacer i18n sin archivos de traducción?](https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx): Sí. Con gt-react o gt-next, el contenido se mantiene inline en tus componentes, dentro de un componente ``, y las traducciones se generan en tiempo de compilación, por lo que no tienes que escribir claves ni archivos JSON por configuración regional ni mantenerlos sincronizados. - [¿Cómo gestiono los plurales en React?](https://generaltranslation.com/es/kb/how-to-handle-plurals-in-react.mdx): No codifiques la lógica de pluralización a mano con comprobaciones como n === 1. Para aplicaciones solo en inglés basta con una pequeña función auxiliar, pero las aplicaciones multilingües necesitan reglas de pluralización adaptadas a la configuración regional, y un componente de i18n como `` de gt-react o gt-next se encarga de ellas en todos los idiomas. ## Previous and next questions - Previous question: [¿Puedo hacer i18n sin archivos de traducción?](https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx) - Next question: [¿Deberías crear tu propia i18n o usar General Translation?](https://generaltranslation.com/es/kb/general-translation-vs-in-house-i18n.mdx) ## Sitemap See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.