# General Translation React SDKs (gt-react, gt-next, gt-react-native): Migration de bibliothèques d’i18n
URL: https://generaltranslation.com/fr/docs/react/guides/migrating-i18n-libraries.mdx
---

title: Migration de bibliothèques d’i18n
description: Comment migrer une configuration d’internationalisation React existante vers General Translation sans abandonner les traductions actuelles.
related:
  links:
    - /docs/react/guides/translating-with-dictionaries
    - /docs/react/guides/translating-jsx
    - /docs/react/guides/translating-strings
    - /docs/react/guides/configuring

---

Migrez une fonctionnalité ou une route complète à la fois afin de pouvoir tester la sélection du paramètre régional, le contenu traduit et le comportement du contenu de secours tout au long de la migration.

## Avant de commencer [#before-start]

Suivez le Quickstart correspondant à votre framework et gardez le provider i18n existant actif jusqu’à ce que son dernier consommateur ait été migré :

* [React SPA Quickstart](/docs/react/react-spa-quickstart)
* [Next.js Quickstart](/docs/react/nextjs-quickstart)
* [TanStack Start Quickstart](/docs/react/tanstack-start-quickstart)
* [React Native Quickstart](/docs/react/react-native-quickstart)

Notez le paramètre régional source actuel, les paramètres régionaux pris en charge, le comportement du contenu de secours et le format d’URL du paramètre régional. Utilisez les mêmes valeurs dans `gt.config.json` avant de déplacer le contenu.

## Choisissez une stratégie de migration [#strategies]

### Remplacer les clés par le contenu source

Choisissez cette approche si vous souhaitez que le contenu traduisible soit placé à côté du composant qui l’affiche.

Remplacez les recherches de clés par [`<T>`](/docs/react/reference/components/t) pour le JSX et [`useGT`](/docs/react/reference/hooks/use-gt) pour les chaînes :

```tsx
// Avant
const { t } = useTranslation();
return <h1>{t('home.welcome')}</h1>;

// Après
return (
  <T>
    <h1>Welcome back</h1>
  </T>
);
```

Copiez la valeur du paramètre régional source de l’ancien dictionnaire plutôt que la valeur traduite. General Translation utilise ce contenu source et sa structure environnante comme contexte de traduction.

### Conserver les dictionnaires existants

Choisissez cette approche si les clés stables font partie de votre workflow de contenu ou s’il n’est pas nécessaire de remplacer chaque recherche.

Déplacez le dictionnaire source vers la [configuration des dictionnaires](/docs/react/guides/translating-with-dictionaries), puis remplacez l’ancien hook par [`useTranslations`](/docs/react/reference/hooks/use-translations) :

```tsx
// Avant
import { useTranslation } from 'react-i18next';

const { t } = useTranslation();
return <h1>{t('home.welcome')}</h1>;

// Après
import { useTranslations } from 'gt-react';

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

Dans Next.js, placez `dictionary.json`, `dictionary.ts` ou `dictionary.js` à la racine du projet ou dans `src/`. [`withGTConfig`](/docs/react/nextjs/config) les détecte automatiquement.

### Utiliser temporairement les deux bibliothèques

Choisissez cette approche pour une migration progressive de routes ou de fonctionnalités déployées indépendamment. Les deux bibliothèques peuvent fonctionner simultanément et, si les deux intégrations utilisent des providers, ceux-ci peuvent coexister. Chaque chaîne doit avoir un unique responsable de la traduction, et les deux bibliothèques doivent recevoir le même paramètre régional actif.

<Callout type="warn">
  Deux bibliothèques d’i18n peuvent ne pas être d’accord sur le paramètre régional actif, les cookies, le routage des URL et les règles de contenu de secours. Définissez une source de vérité unique pour le paramètre régional, testez la navigation entre les routes migrées et non migrées, puis supprimez l’ancien provider dès que son dernier consommateur n’est plus utilisé.
</Callout>

## Migrer une fonctionnalité [#migrate-feature]

1. Choisissez une route ou un composant et répertoriez toutes les anciennes clés de traduction qu’il utilise.
2. Copiez le texte du paramètre régional source, ainsi que les interpolations et règles de pluriel éventuelles.
3. Remplacez chaque recherche par [`<T>`](/docs/react/reference/components/t), [`useGT`](/docs/react/reference/hooks/use-gt) ou [`useTranslations`](/docs/react/reference/hooks/use-translations), selon la stratégie choisie.
4. Conservez les variables en tant que variables au lieu d’insérer leurs valeurs actuelles dans le texte source.
5. Exécutez [`npx gt translate`](/docs/cli/reference/commands/translate).
6. Testez le paramètre régional source, chaque paramètre régional cible, le contenu de secours en cas de traduction manquante et le changement de paramètre régional.
7. Ne supprimez les anciennes clés qu’une fois que le dépôt ne contient plus aucune référence à celles-ci.

Répétez cette séquence jusqu’à ce que l’ancien provider et l’ancienne dépendance n’aient plus aucun consommateur, puis supprimez leur configuration, les fichiers générés et les commandes de build.

## Préserver les traductions existantes [#preserve-translations]

Conserver un dictionnaire source préserve les clés, mais les fichiers existants dans la langue cible ne sont pas automatiquement importés dans General Translation. Continuez à charger ces dictionnaires pendant la migration ou importez des traductions révisées via le [workflow d’importation de Core](/docs/platform/core/reference/gt-class-methods/translation/upload-translations).

Ne copiez pas manuellement des chaînes traduites dans [`<T>`](/docs/react/reference/components/t) comme contenu source. Conservez la langue source d’origine dans le code et vérifiez les traductions importées par rapport à la même version source.
## Next steps

- /docs/react/guides/translating-with-dictionaries
- /docs/react/guides/translating-jsx
- /docs/react/guides/translating-strings
- /docs/react/guides/configuring