La guía completa para la internacionalización de React (i18n) en 2026

Respuesta rápida

Para añadir internacionalización (i18n) a React, usa react-i18next. Instálalo con npm install react-i18next i18next, crea archivos de traducción JSON, configura i18next con tus idiomas y usa el hook useTranslation (const { t } = useTranslation()) para mostrar cadenas traducidas. Para proyectos Next.js, usa next-intl en su lugar para una mejor integración con App Router. IntlPull puede gestionar traducciones y proporcionar traducción impulsada por IA cuando escales más allá de archivos JSON.

---

Introducción a la Internacionalización de React

Construir una aplicación React para una audiencia global requiere una internacionalización (i18n) adecuada. Esta guía cubre todo lo que necesitas saber sobre implementar i18n en aplicaciones React, desde la configuración básica hasta patrones avanzados.

Por qué importa la internacionalización

• Alcanza mercados globales: El 75% de los usuarios de internet prefieren contenido en su lengua materna
• Aumenta la conversión: Las aplicaciones localizadas ven tasas de conversión hasta un 70% más altas
• Mejor UX: Los usuarios interactúan más con contenido que pueden entender completamente
• Beneficios SEO: El contenido localizado se clasifica mejor en los resultados de búsqueda regionales

Eligiendo una librería i18n

react-intl (FormatJS)

JSXCopy
1import { IntlProvider, FormattedMessage } from 'react-intl';
2
3function App() {
4  return (
5    <IntlProvider messages={messages} locale="en">
6      <FormattedMessage id="greeting" defaultMessage="Hello, World!" />
7    </IntlProvider>
8  );
9}

Pros:

• Implementación oficial de FormatJS para React
• Excelente soporte del formato de mensaje ICU
• Formateo integrado de números, fechas y monedas

Contras:

• Mayor tamaño del bundle
• Curva de aprendizaje más pronunciada para la sintaxis ICU

react-i18next

JSXCopy
1import { useTranslation } from 'react-i18next';
2
3function App() {
4  const { t } = useTranslation();
5  return <h1>{t('greeting')}</h1>;
6}

Pros:

• Ligero y flexible
• Gran soporte de TypeScript
• Ecosistema de plugins (backends, detección de idioma)

Contras:

• Formateo de mensajes menos estricto
• Requiere más configuración

next-intl (para Next.js)

JSXCopy
1import { getTranslations } from 'next-intl/server';
2
3async function HomePage() {
4  const t = await getTranslations('home');
5  return <h1>{t('title')}</h1>;
6}

Pros:

• Construido específicamente para Next.js
• Soporte de server component
• Enrutamiento automático

Configurando tu proyecto

Paso 1: Instalar dependencias

TerminalCopy
npm install react-i18next i18next

Paso 2: Crear archivos de traducción

/locales
  /en
    common.json
    home.json
  /es
    common.json
    home.json
  /fr
    common.json
    home.json

Paso 3: Configurar i18next

JavaScriptCopy
1// i18n.js
2import i18n from 'i18next';
3import { initReactI18next } from 'react-i18next';
4
5i18n
6  .use(initReactI18next)
7  .init({
8    resources: {
9      en: { translation: require('./locales/en/common.json') },
10      es: { translation: require('./locales/es/common.json') },
11    },
12    lng: 'en',
13    fallbackLng: 'en',
14    interpolation: { escapeValue: false },
15  });
16
17export default i18n;

Paso 4: Envolver tu App

JSXCopy
1import './i18n';
2
3function App() {
4  return (
5    <Suspense fallback="Cargando...">
6      <YourApp />
7    </Suspense>
8  );
9}

Patrones Avanzados

Manejo de Pluralización

JSONCopy
1{
2  "items": "Tienes {{count}} artículo",
3  "items_plural": "Tienes {{count}} artículos"
4}

JSXCopy
t('items', { count: 5 }) // "Tienes 5 artículos"

Interpolación con Componentes

JSXCopy
<Trans i18nKey="welcome" components={{ strong: <strong /> }}>
  Bienvenido, <strong>{{name}}</strong>!
</Trans>

Traducciones Basadas en Contexto

JSONCopy
1{
2  "friend": "Un amigo",
3  "friend_male": "Un novio",
4  "friend_female": "Una novia"
5}

Carga Perezosa de Traducciones

JavaScriptCopy
1i18n.use(Backend).init({
2  backend: {
3    loadPath: '/locales/{{lng}}/{{ns}}.json',
4  },
5});

Gestionando Traducciones a Escala

A medida que tu app crece, gestionar archivos JSON manualmente se vuelve doloroso:

• Conflictos de versión: Múltiples desarrolladores editando los mismos archivos
• Traducciones faltantes: Difícil rastrear qué está traducido
• Sin contexto: Los traductores no ven dónde se usan las cadenas
• Flujo de trabajo lento: Ciclos de exportación/importación manuales

La Solución: Sistemas de Gestión de Traducción

Un TMS como IntlPull resuelve estos problemas:

TerminalCopy
1# Bajar últimas traducciones
2npx @intlpullhq/cli download
3
4# Subir nuevas cadenas
5npx @intlpullhq/cli upload
6
7# Verificar estado de traducción
8npx @intlpullhq/cli status

Beneficios:

• Sincronización en tiempo real con tu base de código
• Capturas de pantalla de contexto para traductores
• Sugerencias de traducción impulsadas por IA
• Colaboración con flujos de revisión

Mejores Prácticas

1. Extraer todas las cadenas

Nunca dejes texto hardcodeado:

JSXCopy
1// Mal
2<button>Enviar</button>
3
4// Bien
5<button>{t('form.submit')}</button>

2. Usar claves significativas

JSONCopy
1// Mal
2{
3  "text1": "Bienvenido",
4  "text2": "Registrarse"
5}
6
7// Bien
8{
9  "home.hero.title": "Bienvenido",
10  "auth.signup.button": "Registrarse"
11}

3. Incluir contexto

JSONCopy
1{
2  "save": "Guardar",
3  "save_description": "Botón para guardar cambios de perfil de usuario"
4}

4. Manejar idiomas RTL

JSXCopy
<div dir={isRTL ? 'rtl' : 'ltr'}>
  {children}
</div>

5. Formatear Fechas y Números Adecuadamente

JSXCopy
1const formattedDate = new Intl.DateTimeFormat(locale).format(date);
2const formattedPrice = new Intl.NumberFormat(locale, {
3  style: 'currency',
4  currency: 'USD',
5}).format(price);

Errores Comunes a Evitar

1. Concatenación de cadenas: Usa interpolación en su lugar
2. Formateo hardcodeado: Deja que la librería i18n lo maneje
3. Ignorar contexto: La misma palabra puede tener diferentes traducciones
4. No probar RTL: Prueba con Árabe o Hebreo
5. Gestión manual de archivos: Usa un TMS

Optimización de Rendimiento

Code Splitting de Traducciones

JavaScriptCopy
const HomeTranslations = lazy(() => import('./locales/home'));

Usando Suspense

JSXCopy
<Suspense fallback={<Skeleton />}>
  <TranslatedComponent />
</Suspense>

Memoizando Valores Formateados

JSXCopy
1const formattedPrice = useMemo(
2  () => formatCurrency(price, locale),
3  [price, locale]
4);

Probando Apps Internacionalizadas

JavaScriptCopy
1// test-utils.js
2import { render } from '@testing-library/react';
3import { I18nextProvider } from 'react-i18next';
4import i18n from './i18n-test';
5
6function renderWithI18n(ui, locale = 'en') {
7  i18n.changeLanguage(locale);
8  return render(
9    <I18nextProvider i18n={i18n}>{ui}</I18nextProvider>
10  );
11}

Conclusión

La internacionalización de React no tiene que ser compleja. Comienza con una base sólida, sigue las mejores prácticas y usa las herramientas adecuadas para gestionar traducciones a escala.

Siguientes pasos:

1. Configura react-i18next o next-intl en tu proyecto
2. Extrae cadenas hardcodeadas existentes
3. Conecta con IntlPull para gestión de traducción
4. Añade traducciones impulsadas por IA para localización rápida

¿Listo para simplificar tu flujo de trabajo de React i18n? Comienza tu prueba gratuita de IntlPull y gestiona traducciones como un profesional.

Preguntas Frecuentes

¿Cuál es la mejor librería i18n para React?

react-i18next es la mejor librería i18n para la mayoría de los proyectos React debido a su tamaño ligero, flexibilidad y excelente soporte de TypeScript. Para proyectos Next.js, usa next-intl en su lugar—está diseñado específicamente para App Router y Server Components. react-intl (FormatJS) es una buena alternativa si necesitas cumplimiento estricto del formato de mensaje ICU.

¿Cómo añado internacionalización a una app React existente?

Para añadir i18n a una app React existente: (1) Instala react-i18next: npm install react-i18next i18next, (2) Crea archivos JSON de traducción en una carpeta locales, (3) Configura i18next con tus idiomas y envuelve tu app, (4) Reemplaza cadenas hardcodeadas con llamadas t('keyName') usando el hook useTranslation. La CLI de IntlPull puede ayudar a extraer cadenas hardcodeadas existentes automáticamente.

¿Cómo manejo la pluralización en React i18n?

Usa claves plurales con variable count: En tu JSON, añade "items": "{{count}} artículo" y "items_plural": "{{count}} artículos". Luego llama a t('items', { count: 5 }) y react-i18next selecciona automáticamente la forma correcta. Para plurales complejos (Ruso, Árabe), usa formato ICU: "{count, plural, one {# artículo} few {# artículos} many {# artículos} other {# artículos}}".

¿Debería usar react-i18next o next-intl para Next.js?

Usa next-intl para proyectos Next.js. Está diseñado específicamente para Next.js App Router con soporte nativo de Server Component, enrutamiento automático de locale y un bundle más pequeño que react-i18next. react-i18next funciona en Next.js pero requiere configuración extra para Server Components y no se integra tan perfectamente con las características de Next.js.