# General Translation React SDKs (gt-react, gt-next): Traduire avec des dictionnaires
URL: https://generaltranslation.com/fr/docs/react/guides/translating-with-dictionaries.mdx
---

title: Traduire avec des dictionnaires
description: Comment traduire des chaînes à partir d’un dictionnaire central avec le hook useTranslations de General Translation dans React, Next.js, TanStack Start et React Native.
related:
  links:
    - /docs/react/guides/translating-strings
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/handling-plurals-and-branches
    - /docs/react/guides/formatting-variables

---

Un dictionnaire regroupe vos chaînes à traduire au même endroit, associées à un id, au lieu d’être écrites directement dans les composants. Cette approche convient aux équipes qui préfèrent centraliser les textes ou qui migrent depuis une bibliothèque d’i18n basée sur des clés. La plupart des applications peuvent utiliser [`<T>`](/docs/react/guides/translating-jsx) et [`useGT`](/docs/react/guides/translating-strings) à la place.

## Fournir un dictionnaire [#provide]

La manière d’enregistrer vos dictionnaires pour chaque paramètre régional dépend du framework.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    Transmettez vos dictionnaires à `GTProvider` via la prop `dictionaries`, avec les paramètres requis `locale` et `translations`.

    ```tsx
    <GTProvider locale={locale} translations={translations} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>

  <Tab value="Next.js">
    Dans Next.js, vous ne transmettez pas de dictionnaires à `GTProvider`. Créez un fichier de dictionnaire à la racine du projet et enregistrez-le avec le plugin de configuration, ou laissez-le être détecté automatiquement.

    ```json title="dictionary.json"
    {
      "home": { "title": "Welcome back" }
    }
    ```

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

    export default withGTConfig(nextConfig, { dictionary: './dictionary.json' });
    ```
  </Tab>

  <Tab value="TanStack Start">
    Transmettez vos dictionnaires à `GTProvider` via la prop `dictionaries`, avec les paramètres requis `locale` et `translations`.

    ```tsx
    <GTProvider locale={locale} translations={translations} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>

  <Tab value="React Native">
    Transmettez vos dictionnaires à `GTProvider` via la prop `dictionaries`, avec le paramètre régional `locale` actif.

    ```tsx
    <GTProvider locale={locale} dictionaries={dictionaries}>
      <App />
    </GTProvider>;
    ```
  </Tab>
</Tabs>

## Rechercher des entrées avec `useTranslations` [#use-translations]

Appelez [`useTranslations`](/docs/react/reference/hooks/use-translations) pour obtenir une fonction de recherche, puis passez-lui un id d’entrée. Interpolez les valeurs avec un objet d’options.

<Tabs items={['React', 'Next.js', 'TanStack Start', 'React Native']}>
  <Tab value="React">
    ```tsx
    import { useTranslations } from 'gt-react';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="Next.js">
    ```tsx title="Composants synchrones"
    import { useTranslations } from 'gt-next';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```

    ```tsx title="Composants App Router asynchrones"
    import { getTranslations } from 'gt-next/server';

    async function Greeting() {
      const t = await getTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="TanStack Start">
    ```tsx
    import { useTranslations } from 'gt-tanstack-start';

    function Greeting() {
      const t = useTranslations();
      return <h1>{t('home.title')}</h1>;
    }
    ```
  </Tab>

  <Tab value="React Native">
    ```tsx
    import { useTranslations } from 'gt-react-native';

    function Greeting() {
      const t = useTranslations();
      return <Text>{t('home.title')}</Text>;
    }
    ```
  </Tab>
</Tabs>

Passez un id racine pour regrouper toutes les recherches sous un préfixe. Cela fonctionne de la même façon dans chaque framework (`getTranslations('home')` sur le serveur Next.js) :

```tsx
const t = useTranslations('home');
t('title'); // résout home.title
```

*Remarque : rechercher un id qui n’existe pas dans le dictionnaire lève une exception, alors gardez les ids et les entrées du dictionnaire synchronisés.*

## Lire des objets imbriqués [#objects]

Utilisez `.obj(id)` pour lire un groupe imbriqué d’entrées — par exemple, pour itérer sur un ensemble de libellés.

```tsx
const t = useTranslations();
const labels = t.obj('nav.links');
```
## Next steps

- /docs/react/guides/translating-strings
- /docs/react/guides/translating-jsx
- /docs/react/guides/handling-plurals-and-branches
- /docs/react/guides/formatting-variables