# gt-react: General Translation React SDK: Dictionnaires
URL: https://generaltranslation.com/fr/docs/react/guides/dictionaries.mdx
---
title: Dictionnaires
description: Comment utiliser les approches de traduction traditionnelles basées sur des dictionnaires
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas directement. Modifiez le modèle dans content/docs-templates/ à la place. */}

Les dictionnaires offrent une approche traditionnelle pour organiser les traductions sous forme d’objets imbriqués contenant des paires clé-valeur. Bien que les [composants `<T>`](/docs/react/guides/t) constituent l’approche recommandée, les dictionnaires peuvent être utiles lors d’une migration depuis d’autres bibliothèques d’i18n ou si vous préférez centraliser le stockage des traductions.

<Callout>
  **Recommandation :** Utilisez les [composants `<T>`](/docs/react/guides/t) pour les nouveaux projets. Les dictionnaires sont principalement pris en charge pour les migrations et pour assurer la compatibilité avec les workflows de traduction existants.
</Callout>


## Traduction par dictionnaire ou par composant

### Approche par dictionnaire

```tsx
// dictionary.ts
export default {
  greetings: {
    hello: 'Hello, world!',
    welcome: 'Welcome, {name}!'
  }
};

// Utilisation du composant
function MyComponent() {
  const t = useTranslations();
  return <div>{t('greetings.hello')}</div>;
}
```


### Modèle de composant

```tsx
// Utilisation directe du composant - recommandée
function MyComponent() {
  return <T><div>Hello, world!</div></T>;
}
```


## Compromis

### Avantages du dictionnaire

* **Stockage centralisé** - Toutes les traductions au même endroit
* **Standard du secteur** - Un modèle courant dans les autres bibliothèques d’i18n
* **Facilite la migration** - Facile de réutiliser des traductions existantes

### Inconvénients des dictionnaires

* **Complexité** - Nécessitent davantage de mise en place et de configuration
* **Maintenabilité** - Le fait de séparer le contenu de son utilisation complique les mises à jour
* **Débogage** - Il est plus difficile de relier les traductions aux composants
* **Lisibilité** - Les clés ne montrent pas le contenu réel

## Démarrage rapide

### Étape 1 : Créer un dictionnaire

Créez un fichier de dictionnaire à la racine de votre projet ou dans le répertoire `src` :

```ts title="dictionary.ts"
const dictionary = {
  greetings: {
    hello: 'Hello, world!',
    welcome: 'Welcome to our app!'
  },
  navigation: {
    home: 'Home',
    about: 'About',
    contact: 'Contact'
  }
};

export default dictionary;
```

Ou utilisez le format JSON :

```json title="dictionary.json"
{
  "greetings": {
    "hello": "Hello, world!",
    "welcome": "Welcome to our app!"
  },
  "navigation": {
    "home": "Home", 
    "about": "About",
    "contact": "Contact"
  }
}
```

Vous le transmettez ensuite à votre composant [`<GTProvider>`](/docs/react/api/components/gtprovider) :

```jsx title="index.js" copy
import dictionary from "./dictionary.js";
import config from "./gt.config.json";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    {/* [!code highlight] */}
    <GTProvider {...config} dictionary={dictionary}>
      <App />
    </GTProvider>
  </StrictMode>
);
```


### Étape 2 : Utiliser dans les composants

Le hook [`useTranslations`](/docs/react/api/dictionary/use-translations) vous permet d’accéder aux entrées du dictionnaire :

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

function MyComponent() {
  const t = useTranslations();
  
  return (
    <div>
      <h1>{t('greetings.hello')}</h1>
      <p>{t('greetings.welcome')}</p>
    </div>
  );
}
```


## Utiliser des variables

Ajoutez des variables aux entrées du dictionnaire à l’aide de la syntaxe `{variable}` :

```ts title="dictionary.ts"
const dictionary = {
  user: {
    greeting: 'Hello, {name}!',
    itemCount: 'You have {count} items',
    orderTotal: 'Total: ${amount}'
  }
};
```

```tsx
function UserDashboard() {
  const t = useTranslations();
  
  return (
    <div>
      <h1>{t('user.greeting', { name: 'Alice' })}</h1>
      <p>{t('user.itemCount', { count: 5 })}</p>
      <p>{t('user.orderTotal', { amount: 99.99 })}</p>
    </div>
  );
}
```


## Utiliser des préfixes

Restreignez l&#39;accès au dictionnaire à certaines sections à l&#39;aide de préfixes :

```ts title="dictionary.ts"
const dictionary = {
  dashboard: {
    header: {
      welcome: 'Welcome back!',
      lastLogin: 'Last login: {date}'
    },
    stats: {
      totalUsers: 'Total Users: {count}',
      activeUsers: 'Active Users: {count}'
    }
  }
};
```

```tsx
function DashboardHeader() {
  // Le préfixe limite l'accès à 'dashboard.header'
  const t = useTranslations('dashboard.header');
  
  return (
    <header>
      <h1>{t('welcome')}</h1> {/* -> dashboard.header.welcome */}
      <p>{t('lastLogin', { date: 'Today' })}</p> {/* -> dashboard.header.lastLogin */}
    </header>
  );
}

function DashboardStats() {
  // Préfixe différent pour la section stats
  const t = useTranslations('dashboard.stats');
  
  return (
    <div>
      <p>{t('totalUsers', { count: 1000 })}</p> {/* -> dashboard.stats.totalUsers */}
      <p>{t('activeUsers', { count: 150 })}</p> {/* -> dashboard.stats.activeUsers */}
    </div>
  );
}
```


## Prise en charge multilingue

### Traduction automatique (recommandée)

La plupart des utilisateurs devraient utiliser [`loadTranslations`](/docs/react/api/config/load-translations) pour générer automatiquement les traductions à partir de leur dictionnaire de base :

```ts title="dictionary.ts"  
const dictionary = {
  common: {
    save: 'Save',
    cancel: 'Cancel',
    delete: 'Delete'
  },
  forms: {
    required: 'This field is required',
    email: 'Please enter a valid email'
  }
};

export default dictionary;
```

Créez ensuite une fonction `loadTranslations` pour charger les fichiers de traduction générés :

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

Passez-le à votre `<GTProvider>` :

```tsx title="src/index.tsx"
import loadTranslations from './loadTranslations';
import dictionary from './dictionary';

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <GTProvider
      {...config}
      dictionary={dictionary}
      loadTranslations={loadTranslations}
    >
      <App />
    </GTProvider>
  </StrictMode>
);
```

GT génère automatiquement des traductions dans les autres langues à partir de votre dictionnaire de base. Exécutez `npx gt translate` pour générer les traductions de toutes les langues configurées.


### Fichiers de traduction manuels (migration)

Pour migrer depuis d’autres bibliothèques d’i18n ou depuis une gestion manuelle des traductions, utilisez [`loadDictionary`](/docs/react/api/config/load-dictionary) :

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

Cela charge les fichiers de traduction JSON depuis votre répertoire `public/locales/` :

<Files>
  <Folder name="my-app" defaultOpen={true}>
    <Folder name="public" defaultOpen={true}>
      <Folder name="locales" defaultOpen={true}>
        <File name="es.json" />

        <File name="fr.json" />

        <File name="de.json" />
      </Folder>
    </Folder>

    <Folder name="src">
      <File name="loadDictionary.ts" />
    </Folder>
  </Folder>
</Files>

<Callout>
  **Choisissez la bonne approche :** utilisez [`loadTranslations`](/docs/react/api/config/load-translations) pour les nouveaux projets avec génération automatique des traductions, ou [`loadDictionary`](/docs/react/api/config/load-dictionary) si vous migrez des fichiers de traduction existants.
</Callout>


## Configuration de production

### Processus de build

Ajoutez la traduction à votre pipeline de build :

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


### Comportement en développement et en production

* **Développement** : entrées du dictionnaire traduites à la demande à l’aide de la clé API de développement
* **Production** : toutes les traductions du dictionnaire sont générées à l’avance lors de l’étape de build

## Combinaison avec des composants

Les dictionnaires et les [composants `<T>`](/docs/react/guides/t) peuvent être utilisés ensemble :

```tsx
function MixedApproach() {
  const t = useTranslations();
  
  return (
    <div>
      {/* Dictionnaire pour les chaînes simples */}
      <h1>{t('page.title')}</h1>
      
      {/* Composant T pour le JSX complexe */}
      <T>
        <p>This is a <strong>complex message</strong> with <a href="/link">links</a>.</p>
      </T>
      
      {/* Dictionnaire pour les libellés de formulaire */}
      <label>{t('forms.email')}</label>
    </div>
  );
}
```


## Prochaines étapes

<Callout>
  **Voyez-le en action :** Consultez l’[application d’exemple de l’approche par dictionnaire](https://github.com/gt-examples/dictionary-pattern) pour une démonstration en conditions réelles — [aperçu en direct](https://dictionary-pattern.generaltranslation.dev).
</Callout>

* [Guide des langues](/docs/react/guides/languages) - Configurez les langues prises en charge et les paramètres de paramètre régional
* [Guide du contenu dynamique](/docs/key-concepts/dynamic-content) - Gérez les besoins de traduction en exécution
* Références API :
  * [Hook `useTranslations`](/docs/react/api/dictionary/use-translations)