# General Translation Knowledge Base: ¿Puedo hacer i18n sin archivos de traducción?
URL: https://generaltranslation.com/es/kb/i18n-without-translation-files.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Sí. Con gt-react o gt-next, el contenido se mantiene inline en tus componentes, dentro de un componente `<T>`, 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.
Category: Internacionalización
Last updated: 2026-05-07
Authors: Jackie Chen, Ernest McCarter
Published: 2026-05-07

Cualquiera que haya internacionalizado una aplicación de JavaScript conoce el flujo de trabajo. Instalas una biblioteca de i18n, creas un archivo `en.json`, extraes de tus componentes todas las cadenas visibles para el usuario, asignas una clave a cada una y haces referencia a esa clave donde antes estaba la cadena. Después duplicas ese archivo JSON para cada idioma que admites: `es.json`, `fr.json`, `ja.json`.

Al principio, todo va bien. Treinta cadenas, tres idiomas, 90 entradas.

Pero la aplicación crece. Seis meses después tienes 400 cadenas y 12 idiomas: 4800 entradas repartidas en una docena de archivos. Un desarrollador añade una nueva funcionalidad, escribe cinco cadenas nuevas y se olvida de actualizar tres de los archivos de traducción. Nadie se da cuenta hasta que un usuario en Tokio se encuentra con textos alternativos en inglés en una interfaz en japonés. Alguien propone comprar un sistema de gestión de traducciones.

<Video src="https://assets.gtx.dev/i18n-no-translation.mp4" />

## Video

The video is narrated in English, with English captions.

[Can I do i18n without translation files?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-i18n-without-translation-files.mp4) (46 s)

General Translation lets you stop writing translation files with `gt-react` or `gt-next`. Run `npx gt init`, write the English inside a `<T>` component, then add `npx gt translate` to your build script so every build writes the translations.

## El peaje de la gestión de archivos

Los archivos de traducción generan una carga de mantenimiento que crece con cada idioma que admites. Cambias una cadena y tienes que actualizar una docena de archivos. Con el tiempo, esos archivos se desincronizan. Mantenerlos alineados exige herramientas, automatización o disciplina.

El ecosistema de soluciones alternativas lo dice todo: extensiones de VS Code que generan automáticamente claves de traducción, generadores de tipos que validan tu JSON contra interfaces de TypeScript, linters que detectan claves sin usar, comprobaciones de CI que verifican que todas las configuraciones regionales estén sincronizadas. Nadie crea este tipo de herramientas para un flujo de trabajo que funciona bien.

Tu UI dice una cosa, tus archivos de traducción dicen otra, y un mapeo basado en claves es lo único que mantiene unidas ambas partes:

```tsx
function CheckoutSummary({ itemCount, discount }) {
  const { t } = useTranslation('checkout');

  return (
    <div>
      <h2>{t('summary.title')}</h2>
      <p>{t('summary.item_count', { count: itemCount })}</p>
      {discount && <p>{t('summary.discount_applied', { percent: discount })}</p>}
      <p>{t('summary.total_label')}</p>
      <small>{t('summary.tax_notice')}</small>
    </div>
  );
}
```

Para entender qué renderiza este componente, tendrías que abrir `checkout.json`, buscar el namespace `summary` y cotejar cinco claves. Multiplicado por cientos de componentes, la revisión de código se convierte en un continuo ir y venir entre archivos.

La sintaxis de mensajes ICU lo empeora todavía más. El formato que usan bibliotecas como `i18next`, `react-intl` y `next-intl` para plurales, género e interpolación es un minilenguaje propio incrustado en cadenas JSON. Una llave mal colocada en `{count, plural, one {# item} other {# items}}` no saldrá a la luz hasta el tiempo de ejecución. Existen linters para esto, pero la mayoría de los equipos prescinde de ellos. El código inline, en cambio, lo verifican tu compilador de TypeScript y tu IDE en cuanto lo escribes.

## Traducir el código directamente

¿Y si no tuvieras que extraer ninguna cadena?

```tsx
import { T } from 'gt-react';

function CheckoutSummary({ itemCount, discount }) {
  return (
    <T>
      <div>
        <h2>Order Summary</h2>
        <p>You have {itemCount} items in your cart.</p>
        {discount && <p>{discount}% discount applied!</p>}
        <p>Total (before tax):</p>
        <small>Tax calculated at checkout.</small>
      </div>
    </T>
  );
}
```

El componente [`<T>`](/docs/react/reference/components/t) de [`gt-react`](/docs/react/react-quickstart) marca un bloque de JSX para traducirlo. El texto en inglés se queda en tu componente. Cuando un usuario visita la página en español, el contenido dentro de [`<T>`](/docs/react/reference/components/t) se sustituye por su equivalente en español. La estructura y el formato se mantienen.

No hay `t('checkout.summary.title')`, ni `en.json`, ni archivos JSON por configuración regional que mantener sincronizados.

## Las traducciones como resultado de la compilación

Se generan durante el despliegue. La [CLI de GT](/docs/cli/reference/commands/translate) analiza tu base de código en busca de todo lo que haya dentro de componentes [`<T>`](/docs/react/reference/components/t) y genera traducciones para cada idioma de destino. El resultado se guarda en un directorio excluido mediante gitignore, igual que el CSS compilado o el JavaScript empaquetado.

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr", "ja", "de", "ko", "zh"],
  "files": {
    "gt": {
      "output": "public/_gt/[locale].json"
    }
  }
}
```

```txt title=".gitignore"
public/_gt/
```

En desarrollo, las traducciones se generan bajo demanda. Cambia una cadena, recarga la página y la verás en japonés al instante. En producción, todo está pregenerado y se sirve desde una CDN. Los archivos de traducción siguen existiendo en el disco, pero son artefactos generados, no algo que tengas que escribir ni mantener.

## Qué cambia en la práctica

La diferencia se nota más en el trabajo diario que en los diagramas de arquitectura.

Un PR que añade una nueva sección a una página se lee como un PR que añade una nueva sección a una página. Quien lo revisa ve el texto real, no `checkout.summary.discount_applied_notice`. La revisión de código ya no obliga a tener un archivo JSON abierto al lado para comparar.

Refactorizar deja de ser tan doloroso. Cambia el nombre de un componente, muévelo, divídelo en partes. Las traducciones acompañan al contenido porque no hay claves que reasignar. Añadir un idioma se reduce a cambiar una línea de la configuración. Al eliminar un componente, sus traducciones simplemente dejan de generarse, en lugar de quedar claves huérfanas repartidas en 15 archivos que nadie quiere limpiar.

## Hacia dónde van las bibliotecas de i18n

En todo el ecosistema, la tendencia apunta hacia las cadenas inline. Las primeras bibliotecas de i18n, como `i18next` y `react-intl`, se crearon cuando la traducción automática no era viable y cada cadena tenía que pasar por un traductor humano. Los diccionarios tenían sentido como formato de intercambio. Esa limitación ya no existe, y el coste que supone para la experiencia de desarrollo mantener archivos de cadenas paralelos es cada vez más difícil de justificar.

`next-intl` añadió [mensajes inline experimentales con extracción automática](https://next-intl.dev/docs/usage/extraction) junto a su modo de diccionario. [El compilador de Lingui](https://lingui.dev/ref/swc-plugin) extrae mensajes en tiempo de compilación a partir de plantillas etiquetadas inline. [Paraglide](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) sigue otro camino: compila los archivos de mensajes en funciones por configuración regional compatibles con tree-shaking. Los enfoques difieren, pero en todos ellos el contenido se acerca cada vez más al componente. GT lleva esta idea hasta sus últimas consecuencias: tu JSX es la fuente de verdad y la traducción es un paso más de la compilación.

## La contrapartida

Cuando escribes contenido inline, lo haces en tu idioma nativo. La estructura de tus componentes, tus patrones de frases y el flujo de tu UI reflejan cómo piensas en inglés (o en cualquiera que sea tu idioma de origen). Un enfoque basado en diccionarios como `next-intl` es, por diseño, más independiente del idioma, porque el componente nunca contiene una frase real en ningún idioma, sino solo una clave que apunta a otro sitio.

Sin embargo, la mayoría de los desarrolladores ya piensan en un idioma concreto cuando crean una UI. El diseño, los textos y las etiquetas de los botones se conciben primero en inglés. Ese sesgo está en el diseño, tanto si las cadenas están inline como si están en un archivo JSON. Creemos que el framework de i18n debe adaptarse a tu forma real de trabajar. Crea la aplicación de forma natural y deja que el framework se encargue de la traducción, en lugar de abstraer el contenido en claves en aras de la neutralidad lingüística.

## Primeros pasos

```bash
npx gt@latest init
```

El asistente de configuración inicial configura tu proyecto, instala las dependencias y habilita la recarga en caliente de traducciones durante el desarrollo. Consulta la guía completa en el [Inicio rápido de la CLI](/docs/cli/quickstart).

Cuando termine, envuelve el contenido en [`<T>`](/docs/react/reference/components/t), inicia tu servidor de desarrollo y usa el componente [`<LocaleSelector>`](/docs/react/reference/components/locale-selector) para cambiar de idioma:

```tsx
import { LocaleSelector } from 'gt-react';

function Header() {
  return (
    <header>
      <nav>{/* ... */}</nav>
      <LocaleSelector />
    </header>
  );
}
```

En desarrollo, las traducciones se generan bajo demanda para que puedas ver tu aplicación en cualquier idioma al instante. En producción, las traducciones son pregeneradas. Agrega el paso de traducción a tu proceso de compilación y configura `GT_PROJECT_ID` y `GT_API_KEY` en tu proveedor de hosting:

```json title="package.json"
{
  "scripts": {
    "build": "npx gt translate && next build"
  }
}
```

El comando [`translate`](/docs/cli/reference/commands/translate) analiza tu base de código en busca de todos los usos de [`<T>`](/docs/react/reference/components/t) y genera las traducciones, para que todas las configuraciones regionales estén listas al compilar tu aplicación.

`gt-react` es de código abierto. Para el App Router de Next.js, usa [`gt-next`](/docs/react/nextjs-quickstart). Para React Native, usa [`gt-react-native`](/docs/react/react-native-quickstart).

## Related questions

- [¿Cómo traduzco texto condicional en JSX?](https://generaltranslation.com/es/kb/translate-conditional-jsx.mdx): En lugar de traducir por separado cada rama de un operador ternario, envuelve la oración completa en un componente `<T>` y expresa la condición con `<Branch>`; así, el traductor ve el contexto completo y puede reordenar la oración según cada idioma.
- [¿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 `<Plural>` de gt-react o gt-next se encarga de ellas en todos los idiomas.
- [¿Cuál es el mejor software de localización para desarrolladores?](https://generaltranslation.com/es/kb/best-localization-software.mdx): Busca un único sistema que cubra todo el flujo, desde la biblioteca de i18n en tu código hasta la traducción y la entrega, en lugar de ir uniendo por separado una biblioteca, un sistema de gestión de traducciones y un proveedor de traducción.

## Previous and next questions

- Previous question: [¿Cuál es el mejor software de localización para desarrolladores?](https://generaltranslation.com/es/kb/best-localization-software.mdx)
- Next question: [¿Cuál es la mejor biblioteca de i18n para una aplicación React?](https://generaltranslation.com/es/kb/best-react-i18n-library.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/es/kb/sitemap.md) for every article.