# General Translation React SDKs (gt-react, gt-next, gt-react-native): Almacenar traducciones localmente
URL: https://generaltranslation.com/es/docs/react/guides/storing-translations.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Cómo incluir localmente las traducciones de General Translation en lugar de cargarlas desde la CDN.

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`](/docs/react/reference/functions/load-translations) 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`](/docs/react/nextjs/config) lo detecta automáticamente, o puedes definir [`loadTranslationsPath`](/docs/react/nextjs/config#load-translations-path) 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`](/docs/react/reference/functions/load-translations) 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`](/docs/react/reference/functions/load-translations) 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 paquete y no se realiza ninguna solicitud a la CDN. Para volver a usar la entrega por CDN, elimina el loader y proporciona un [`projectId`](/docs/react/reference/config#project-id) 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

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.