# General Translation React SDKs (gt-react, gt-next): Stocker les traductions localement
URL: https://generaltranslation.com/fr/docs/react/guides/storing-translations.mdx
---

title: Stocker les traductions localement
description: Comment inclure les traductions de General Translation dans votre application au lieu de les charger depuis le CDN, avec React, Next.js, TanStack Start et React Native.
related:
  links:
    - /docs/react/guides/configuring
    - /docs/react/guides/developing-spa-translations
    - /docs/react/guides/managing-locales
    - /docs/react/guides/translating-jsx

---

Par défaut, General Translation charge les traductions depuis son CDN à l’exécution. Vous pouvez également générer des fichiers de traduction, les inclure dans votre application et les charger vous-même. Cela supprime la dépendance au CDN à l’exécution, au prix d’un redéploiement pour mettre à jour les traductions.

## Configurer un chemin de sortie local [#configure]

Dans `gt.config.json`, définissez la sortie du fichier `gt` vers un chemin de votre code source, en utilisant l’espace réservé `[locale]`. Cette configuration est identique pour tous les frameworks.

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

## Générer les fichiers [#generate]

Exécutez le CLI pour traduire votre contenu et générer un fichier par paramètre régional à cet emplacement.

```bash
npx gt translate
```

Intégrez-le à votre build pour que les fichiers restent à jour — par exemple, `"build": "npx gt translate && vite build"` (ou `next build`, `expo export`, et ainsi de suite).

## Chargez-les dans votre application [#load]

Fournissez un callback [`loadTranslations`](/docs/react/reference/functions/load-translations) qui importe le fichier correspondant à un paramètre régional. La manière de l’enregistrer dépend du framework.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Passez `loadTranslations` à l’appel d’initialisation.

    ```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">
    Créez un fichier `loadTranslations.ts` à la racine de votre projet. Le plugin `withGTConfig` le détecte automatiquement (ou définissez `loadTranslationsPath` explicitement).

    ```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">
    Passez `loadTranslations` à l’appel d’initialisation.

    ```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">
    Passez `loadTranslations` à l’appel d’initialisation.

    ```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>

Avec un loader local configuré, les traductions sont lues depuis votre bundle et aucune requête au CDN n’est effectuée. Pour revenir à un chargement via le CDN, supprimez le loader et fournissez plutôt un `projectId` (voir [Configurer 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