# gt-next: General Translation Next.js SDK: Migration
URL: https://generaltranslation.com/fr/docs/next/guides/migration.mdx
---
title: Migration
description: Découvrez comment migrer un projet vers gt-next
---
## Vue d’ensemble
Ce guide présente les étapes nécessaires pour migrer vers gt-next un projet qui utilise déjà une bibliothèque d’i18n.
Nous vous donnerons également quelques conseils et recommandations pour que la migration se passe le plus facilement possible.
## Prérequis
* Un projet utilisant actuellement une autre bibliothèque d’i18n.
* Une connaissance de base de la bibliothèque `gt-next`.
## Pourquoi migrer ?
Il existe de nombreuses raisons de migrer votre projet vers gt-next.
En voici quelques-unes :
* **Fini les fichiers JSON :** Vous n’aurez plus jamais à gérer vos traductions dans des fichiers JSON.
Tout votre contenu reste en ligne dans le code, là où il doit être.
* **Traductions automatiques :** Générez des traductions de haute qualité, adaptées au contexte, avec notre 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
Installez `gt-next` et l’outil CLI `gt`.
```bash
npm i gt-next gt
```
```bash
yarn add gt-next
yarn add --dev gt
```
```bash
bun add gt-next
bun add --dev gt
```
```bash
pnpm add gt-next
pnpm add --save-dev gt
```
Créez un fichier `gt.config.json` à la racine de votre projet contenant une propriété `defaultLocale` et un tableau `locales`.
```json title="gt.config.json" copy
{
"defaultLocale": "en",
"locales": ["en", "fr", "es"]
}
```
Ensuite, ajoutez le composant `` au layout racine de votre application.
```tsx title="app/layout.tsx" copy
import { GTProvider } from 'gt-next'
export default function RootLayout({ children }) {
return (
{children}
)
}
```
Puis, ajoutez `withGTConfig` dans votre fichier `next.config.js`.
```js title="next.config.ts" copy
import { withGTConfig } from 'gt-next/config'
const nextConfig = {
// Vos options next.config.ts
}
export default withGTConfig(nextConfig, {
// Votre configuration GT
})
```
Pour obtenir des instructions plus détaillées, consultez le [guide de démarrage rapide](/docs/next).
À ce stade, vous avez 3 options :
1. Migrez entièrement votre projet vers `gt-next` 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 migrez seulement une partie de votre projet vers `gt-next`.
Pour plus de détails sur chaque option, consultez la section [stratégies de migration](#strategies).
## Stratégies de migration [#strategies]
### Option 1 : Migrez entièrement votre projet
Cette option est la plus simple, 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-next`.
Si votre application utilise des hooks React comme `useTranslations`, recherchez toutes les occurrences de `useTranslations` dans votre code et remplacez-les par `useGT`.
Ensuite, vous devrez remplacer toutes les clés de chaîne par leurs valeurs de chaîne 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 {t('hello.description')}
}
```
Vous devrez le remplacer par :
```tsx
export default function MyComponent() {
const gt = useGT()
return {gt('Hello, world!')}
}
// OU
export default function MyComponent() {
return Hello, world!
}
```
Faites-le 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-next`, tout en continuant à utiliser les dictionnaires de votre ancienne bibliothèque i18n
et en réservant les fonctionnalités en ligne de GT aux nouveaux contenus.
Dans ce cas, vous pouvez faire quelque chose de similaire à l’option 1 :
Repérez tous les usages de votre ancienne bibliothèque i18n, par exemple les hooks `useTranslations`, puis remplacez-les par les hooks `useTranslations` de `gt-next`.
Le hook `useTranslations` se comporte de manière très proche des hooks `useTranslations` d’autres bibliothèques i18n, et vous pouvez l’utiliser de la même manière.
```tsx
import { useTranslation } from 'react-i18next'
export default function MyComponent() {
const { t } = useTranslation()
return {t('hello.description')}
}
```
```tsx
import { useTranslations } from 'gt-next'
export default function MyComponent() {
const t = useTranslations()
return {t('hello.description')}
}
```
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.
La fonction d’initialisation `withGTConfig` dans `next.config.js` détectera automatiquement le fichier de dictionnaire à la racine de votre projet ou dans le répertoire `src`.
Consultez le guide [dictionaries](/docs/next/guides/dictionaries) pour plus de détails.
### Option 3 : Continuez à utiliser l’ancienne bibliothèque i18n pour le moment et ne migrez qu’une partie de votre projet vers `gt-next`
Cette option est la plus flexible et nécessite le moins de modifications de code d’un seul coup.
Dans ce cas, vous pouvez procéder de façon similaire à l’option 2, mais en ne migrant qu’une partie de votre projet vers `gt-next`.
Par exemple, vous pouvez continuer à utiliser l’ancienne bibliothèque i18n pour certains composants, et n’utiliser `gt-next` que pour les autres et pour les nouveaux contenus.
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 source de bugs.
## Conseils de migration
### 1. Utilisez le hook `useGT` ou le composant `` autant que possible
Dans la mesure du possible, nous vous recommandons d'utiliser le hook `useGT` ou le composant ``.
Cela vous facilitera grandement la modification 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 existants.
Nous le proposons pour faciliter la migration, mais nous déconseillons de l'utiliser pour tout nouveau contenu.
### 3. Utiliser l’IA
Si vous utilisez l’IA pour vous aider à migrer votre projet, les fichiers `LLMs.txt` et `LLMs-full.txt` sont disponibles aux adresses suivantes :
* [LLMs.txt](/llms.txt)
* [LLMs-full.txt](/llms-full.txt)