# gt-react: General Translation React SDK: Migrer
URL: https://generaltranslation.com/fr/docs/react/guides/migration.mdx
---
title: Migrer
description: Découvrez comment migrer un projet vers gt-react
---

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


## Vue d’ensemble

Ce guide présente les étapes nécessaires pour migrer un projet qui utilise déjà une bibliothèque d’i18n vers `gt-react`.

Nous vous donnerons également quelques conseils et recommandations pour que la migration se déroule aussi simplement que possible.

## Prérequis

* Un projet utilisant actuellement une autre bibliothèque d’i18n.
* Une connaissance de base de la bibliothèque `gt-react`.

## Pourquoi migrer ?

Il existe de nombreuses raisons pour lesquelles vous pourriez vouloir migrer votre projet vers `gt-react`.

En voici quelques-unes :

* **Fini les fichiers JSON :** vous n’aurez plus jamais à gérer des traductions dans des fichiers JSON.
  Tout votre contenu se trouve directement dans votre code, là où il doit être.
* **Traductions automatiques :** générez des traductions de haute qualité, adaptées au contexte, avec notre outil CLI.
  Vous n’aurez plus jamais à attendre vos traductions.
* **Expérimentez en développement :** testez facilement les traductions en développement grâce au rechargement à chaud.

## Configuration

<Steps>
  <Step>
    Installez `gt-react` et l’outil CLI `gt`.

    <Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
      <Tab value="npm">
        ```bash
        npm i gt-react
        npm i gt
        ```
      </Tab>

      <Tab value="yarn">
        ```bash
        yarn add gt-react
        yarn add --dev gt
        ```
      </Tab>

      <Tab value="bun">
        ```bash
        bun add gt-react
        bun add --dev gt
        ```
      </Tab>

      <Tab value="pnpm">
        ```bash
        pnpm add gt-react
        pnpm add --save-dev gt
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step>
    Créez un fichier `gt.config.json` à la racine de votre projet, avec une propriété `defaultLocale` et un tableau `locales`.

    ```json title="gt.config.json" copy
    {
      "defaultLocale": "en",
      "locales": ["en", "fr", "es"]
    }
    ```

    Ajoutez le composant `<GTProvider>` à la racine de votre application, puis utilisez l’opérateur de propagation pour passer l’objet `config` en props.

    ```tsx
    import { GTProvider } from 'gt-react'
    import config from './gt.config.json'

    <GTProvider {...config}>
      <App />
    </GTProvider>
    ```

    Pour des instructions plus détaillées, consultez le guide de [démarrage rapide du projet](/docs/react).
  </Step>

  <Step>
    À ce stade, vous avez 3 options :

    1. Migrez entièrement votre projet vers `gt-react` et supprimez l’ancienne bibliothèque i18n.
    2. Migrez entièrement votre projet, mais continuez à utiliser les dictionnaires de l’ancienne bibliothèque i18n.
    3. Continuez à utiliser l’ancienne bibliothèque i18n pour le moment et ne migrez qu’une partie de votre projet vers `gt-react`.

    Pour plus de détails sur chaque option, consultez la section [stratégies de migration](#strategies).
  </Step>
</Steps>

## Stratégies de migration [#strategies]

### Option 1 : Migrez entièrement votre projet

Cette option est la plus directe, mais c’est aussi celle qui nécessitera le plus de modifications de code d’un seul coup.

Après avoir configuré votre projet, vous devrez rechercher toutes les occurrences de votre ancienne bibliothèque i18n et les remplacer par `gt-react`.

Si votre application utilise des hooks React tels que `useTranslation`, recherchez toutes les occurrences de `useTranslation` dans votre base de code et remplacez-les par `useGT`.

Ensuite, vous devrez remplacer toutes les clés de traduction par leurs valeurs textuelles réelles.

Par exemple, si votre ancien code ressemble à ceci :

```json title="dictionary.json"
{
  "hello": {
    "description": "Hello, world!"
  }
}
```

```tsx
export default function MyComponent() {
  const { t } = useTranslation()
  return <div>{t('hello.description')}</div>
}
```

Vous devrez le remplacer par :

```tsx
export default function MyComponent() {
  const { t } = useGT()
  return <div>{t('Hello, world!')}</div>
}
// OU
export default function MyComponent() {
  return <T>Hello, world!</T>
}
```

Faites cela pour toutes les occurrences de votre ancienne bibliothèque i18n.


### Option 2 : Migrez entièrement votre projet, mais continuez à utiliser les dictionnaires de votre ancienne bibliothèque i18n

Supposons que vous souhaitiez migrer votre projet vers `gt-react`, tout en continuant à utiliser les dictionnaires de votre ancienne bibliothèque i18n
et en réservant les fonctionnalités inline de GT aux nouveaux contenus.

Dans ce cas, vous pouvez procéder de façon similaire à l’option 1 :

Repérez toutes les occurrences de votre ancienne bibliothèque i18n, comme les hooks `useTranslation`, et remplacez-les par des hooks `useTranslations`.

Le hook `useTranslations` fonctionne de manière très similaire aux hooks `useTranslation`, et vous pouvez l’utiliser de la même façon.

<Tabs items={['Avant', 'Après']}>
  <Tab value="Before">
    ```tsx
    import { useTranslation } from 'react-i18next'
    export default function MyComponent() {
      const { t } = useTranslation()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>

  <Tab value="After">
    ```tsx
    import { useTranslations } from 'gt-react'
    export default function MyComponent() {
      const t = useTranslations()
      return <div>{t('hello.description')}</div>
    }
    ```
  </Tab>
</Tabs>

Côté configuration, vous devrez créer un fichier `dictionary.[js|ts|json]` à la racine de votre projet ou dans le répertoire `src`.
Copiez le contenu de votre ancien fichier de dictionnaire dans ce nouveau fichier, puis transmettez-le au composant `GTProvider`.

```tsx
import { GTProvider } from 'gt-react'
import dictionary from './dictionary.json'
import config from './gt.config.json'

<GTProvider {...config} dictionary={dictionary}>
  <App />
</GTProvider>
```

Consultez le guide [dictionnaires](/docs/react/guides/dictionaries) pour plus de détails.


### Option 3 : continuer à utiliser l’ancienne bibliothèque i18n pour le moment et ne migrer qu’une partie de votre projet vers `gt-react`

Cette option est la plus flexible et nécessite le moins de modifications de code d’un seul coup.

Dans ce cas, vous pouvez faire quelque chose de similaire à l’option 2, mais en ne migrant qu’une partie de votre projet vers `gt-react`.

Par exemple, vous pouvez continuer à utiliser l’ancienne bibliothèque i18n pour certains composants, et n’utiliser `gt-react` que pour d’autres ainsi que pour les nouveaux contenus.

<Callout type="warn">
  Cette option n’est pas recommandée, car vous devrez gérer deux bibliothèques i18n différentes dans votre projet, ce qui peut être complexe et entraîner des bugs.
</Callout>

## Conseils de migration

### 1. Utilisez le hook `useGT` ou le composant `<T>` autant que possible

Dans la mesure du possible, nous vous recommandons d’utiliser le hook `useGT` ou le composant `<T>`.

Cela facilitera grandement la mise à jour de votre contenu par la suite et rendra votre base de code bien plus lisible.

### 2. Utilisez le hook `useTranslations` pour le contenu existant

Le hook `useTranslations` est un excellent moyen de continuer à utiliser vos dictionnaires actuels.

Nous le proposons pour faciliter la migration, mais nous ne recommandons pas de l’utiliser pour du nouveau contenu.

### 3. Utiliser l’IA

Si vous utilisez l’IA pour vous aider à migrer votre projet, nous mettons à votre disposition `LLMs.txt` et `LLMs-full.txt` ici :

* [LLMs.txt](/llms.txt)
* [LLMs-full.txt](/llms-full.txt)

Ces fichiers contiennent l’intégralité de cette documentation, afin que votre outil d’IA ait accès à toutes les informations nécessaires pour vous aider à migrer votre projet.