# gt-next: General Translation Next.js SDK: Stockage local des traductions
URL: https://generaltranslation.com/fr/docs/next/guides/local-tx.mdx
---
title: Stockage local des traductions
description: Stocker les traductions dans le bundle de votre application au lieu d’utiliser un CDN
---

## Que sont les traductions locales ?

Les traductions locales sont stockées dans le bundle de votre application, au lieu d’être récupérées depuis un CDN (Content Distribution Network). Lorsque vous ajoutez la commande `gt translate` à votre processus de build, des traductions au format JSON sont générées. La dernière étape consiste à les intégrer à votre application pour pouvoir les utiliser.

Il existe deux façons de procéder :

1. **Dans le bundle de votre application** (local) : enregistrez les traductions dans le bundle de votre application après leur génération
2. **Dans un CDN** (par défaut) : récupérez les traductions depuis un CDN à l’exécution

Par défaut, `gt-next` récupère les traductions depuis le CDN de General Translation. Lorsque vous traduisez votre application à l’aide de notre API, les traductions sont automatiquement enregistrées sur notre CDN.

<Callout>
  **Comportement par défaut :** GT utilise par défaut le stockage sur CDN. Ne passez au stockage local que si vous avez besoin des avantages spécifiques qu’il offre.
</Callout>

## Arbitrages

### Avantages des traductions locales

* **Temps de chargement plus courts** : les traductions locales sont servies directement par votre application et se chargent plus vite que celles servies depuis un CDN
* **Aucune dépendance à des services externes** : la capacité de votre application à charger les traductions ne dépend pas de la disponibilité du CDN. Si aucune traduction n’est trouvée pour un paramètre régional, l’application revient automatiquement à la langue par défaut
* **Fonctionne hors ligne** : les traductions sont intégrées à votre application

### Inconvénients des traductions locales

* **Taille du bundle accrue** : les traductions locales augmentent la taille du bundle de votre application, ce qui peut ralentir son chargement initial
* **Gestion du contenu** : pour modifier une traduction, vous devez redéployer votre application avec la nouvelle traduction à chaque modification

## Configuration

### Étape 1 : Créer la fonction de chargement

Ajoutez un fichier `loadTranslations.[js|ts]` dans `./src` avec le contenu suivant :

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

[`withGTConfig`](/docs/next/api/config/with-gt-config) détecte automatiquement le fichier `loadTranslations.[js|ts]` dans votre dossier `src/` ou à la racine de votre projet.


### Étape 2 : Configurer le CLI

Exécutez la commande de configuration et sélectionnez le stockage local :

```bash
npx gt configure
```

Lorsque vous y êtes invité :

* **Enregistrer sur le CDN ?** Sélectionnez &quot;Non&quot;
* **Répertoire de traduction :** Saisissez `./public/_gt`

Vous pouvez aussi configurer manuellement le fichier `gt.config.json` pour utiliser des traductions locales. Consultez la [documentation de configuration du CLI](/docs/cli/reference/config) pour en savoir plus.


### Étape 3 : Générer les traductions

Désormais, lorsque vous exécutez la commande `translate`, les traductions sont automatiquement téléchargées et intégrées à votre base de code :

```bash
npx gt translate
```

Les traductions seront stockées dans `public/_gt/` et embarquées avec votre application.


## Intégration au processus de build

### Processus de build Next.js

Ajoutez la génération des traductions à votre script de build :

```json
{
  "scripts": {
    "build": "npx gt translate && <...YOUR_BUILD_COMMAND...>"
  }
}
```


### Pipeline CI/CD

```yaml
# .github/workflows/deploy.yml
- name: Generate Translations
  run: npx gt translate
  
- name: Build Application  
  run: npm run build
```


## Problèmes courants

### Fichiers de traduction manquants

Assurez-vous que les traductions ont été générées avant le build :

```bash
# ❌ Build sans traductions
<...YOUR_BUILD_COMMAND...>

# ✅ Générer les traductions en premier
npx gt translate && <...YOUR_BUILD_COMMAND...>
```


### Erreurs de chemin d’importation

Reprenez la structure de vos répertoires dans la fonction de chargement :

```ts
// ❌ Chemin incorrect
const t = await import(`../translations/${locale}.json`);

// ✅ Chemin correct pour public/_gt
const t = await import(`../public/_gt/${locale}.json`);
```


### Bundle volumineux

Envisagez le code splitting pour les applications avec de nombreuses langues :

```ts
// Charger les traductions uniquement si nécessaire
export default async function loadTranslations(locale: string) {
  // Charger uniquement si le paramètre régional est actif
  if (locale === getCurrentLocale()) {
    const translations = await import(`../public/_gt/${locale}.json`);
    return translations.default;
  }
  return {};
}
```

<Callout>
  Le stockage local est surtout adapté aux applications dont les traductions sont stables et n&#39;ont pas besoin d&#39;être mises à jour fréquemment.
</Callout>


## Étapes suivantes

* [Guide du middleware](/docs/next/guides/middleware) - Détection de la langue et routage
* [Guide des langues](/docs/next/guides/languages) - Configurer les langues prises en charge
* Références d’API :