# General Translation React SDKs (gt-react, gt-next): Almacenar traducciones localmente
URL: https://generaltranslation.com/es/docs/react/guides/storing-translations.mdx
---

title: Almacenar traducciones localmente
description: Cómo incluir las traducciones de General Translation en tu aplicación en lugar de cargarlas desde la CDN, en React, Next.js, TanStack Start y React Native.
related:
  links:
    - /docs/react/guides/configuring
    - /docs/react/guides/developing-spa-translations
    - /docs/react/guides/managing-locales
    - /docs/react/guides/translating-jsx

---

De forma predeterminada, General Translation carga las traducciones desde su CDN en tiempo de ejecución. Como alternativa, puedes generar archivos de traducción, incluirlos en tu aplicación y cargarlos tú mismo. Esto elimina la dependencia de la CDN en tiempo de ejecución, a cambio de tener que volver a desplegar para actualizar las traducciones.

## Configura una ruta de salida local [#configure]

En `gt.config.json`, configura la salida del archivo `gt` en una ruta dentro de tu código fuente, usando el marcador de posición `[locale]`. Esto es igual en todos los frameworks.

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

## Genera los archivos [#generate]

Ejecuta la CLI para traducir tu contenido y crear un archivo por configuración regional en esa ruta.

```bash
npx gt translate
```

Agrégalo a tu proceso de compilación para que los archivos se mantengan actualizados; por ejemplo, `"build": "npx gt translate && vite build"` (o `next build`, `expo export`, etc.).

## Cárgalas en tu aplicación [#load]

Proporciona un callback de [`loadTranslations`](/docs/react/reference/functions/load-translations) que importe el archivo correspondiente a una configuración regional. La forma de registrarlo depende del framework.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Pasa `loadTranslations` a la llamada de inicialización.

    ```tsx title="src/routes/root.tsx"
    import { initializeGT } from 'gt-react';
    import gtConfig from '../../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`../_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```
  </Tab>

  <Tab value="Next.js">
    Crea un archivo `loadTranslations.ts` en la raíz del proyecto. El plugin `withGTConfig` lo detecta automáticamente (o define `loadTranslationsPath` explícitamente).

    ```ts title="loadTranslations.ts"
    export default async function loadTranslations(locale: string) {
      const t = await import(`./_gt/${locale}.json`);
      return t.default;
    }
    ```

    ```ts title="next.config.ts"
    import { withGTConfig } from 'gt-next/config';

    export default withGTConfig(nextConfig, { loadTranslationsPath: './loadTranslations.ts' });
    ```
  </Tab>

  <Tab value="TanStack Start">
    Pasa `loadTranslations` a la llamada de inicialización.

    ```tsx
    import { initializeGT } from 'gt-tanstack-start';
    import gtConfig from '../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`./_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```
  </Tab>

  <Tab value="React Native">
    Pasa `loadTranslations` a la llamada de inicialización.

    ```tsx
    import { initializeGT } from 'gt-react-native';
    import gtConfig from '../gt.config.json';

    const loadTranslations = (locale: string) =>
      import(`./_gt/${locale}.json`).then((m) => m.default);

    initializeGT({ ...gtConfig, loadTranslations });
    ```
  </Tab>
</Tabs>

Con un loader local, las traducciones se leen desde tu bundle y no se realiza ninguna solicitud a la CDN. Para volver a usar la CDN, elimina el loader y proporciona un `projectId` en su lugar (consulta [Configurar General Translation](/docs/react/guides/configuring#delivery)).
## Next steps

- /docs/react/guides/configuring
- /docs/react/guides/developing-spa-translations
- /docs/react/guides/managing-locales
- /docs/react/guides/translating-jsx