Migration
Découvrez comment migrer un projet vers gt-next
Aperçu
Ce guide couvrira les étapes nécessaires pour migrer un projet utilisant déjà une bibliothèque i18n vers gt-next.
Nous fournirons également quelques conseils et suggestions pour rendre la migration aussi fluide que possible.
Prérequis
- Un projet qui utilise actuellement une autre bibliothèque i18n.
- Une compréhension de base de la bibliothèque
gt-next.
Pourquoi migrer ?
Il existe de nombreuses raisons pour lesquelles vous pourriez vouloir migrer votre projet vers gt-next.
En voici quelques-unes :
- Fini les fichiers JSON : Ne gérez plus jamais vos traductions dans des fichiers JSON. Tout votre contenu vit directement dans votre code, là où il doit être.
- Traductions automatiques : Générez des traductions de haute qualité et adaptées au contexte avec notre outil CLI. Vous n'aurez plus jamais à attendre vos traductions.
- Expérimentez en développement : Expérimentez facilement avec les traductions en développement grâce au rechargement à chaud des traductions.
Configuration
Installez gt-next et l'outil CLI gtx-cli.
npm i gt-next
npm i --save-dev gtx-cliyarn add gt-next
yarn add --dev gtx-clibun add gt-next
bun add --dev gtx-clipnpm add gt-next
pnpm add --save-dev gtx-cliCréez un fichier gt.config.json à la racine de votre projet contenant une propriété defaultLocale et un tableau locales.
{
"defaultLocale": "en",
"locales": ["en", "fr", "es"]
}Ensuite, ajoutez le composant <GTProvider> au layout racine de votre application.
import { GTProvider } from 'gt-next'
export default function RootLayout({ children }) {
return (
<html>
<body>
<GTProvider>
{children}
</GTProvider>
</body>
</html>
)
}Ensuite, ajoutez withGTConfig à votre fichier next.config.js.
import withGTConfig from 'gt-next/next-config'
const nextConfig = {
// Your next.config.ts options
}
export default withGTConfig(nextConfig, {
// Your GT configuration
})Pour des étapes plus détaillées, consultez le guide de démarrage rapide.
À ce stade, vous avez 3 options :
- Migrer entièrement votre projet vers
gt-next, et supprimer l'ancienne bibliothèque i18n. - Migrer entièrement votre projet, mais continuer à utiliser les dictionnaires de l'ancienne bibliothèque i18n.
- Continuer à utiliser l'ancienne bibliothèque i18n pour l'instant, et ne migrer qu'une partie de votre projet vers
gt-next.
Pour plus de détails sur chaque option, consultez la section stratégies de migration.
Stratégies de migration
Option 1 : Migrer entièrement l'ensemble de votre projet
Cette option est la plus simple, mais elle nécessitera également le plus de modifications de code en une seule fois.
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 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 chaînes par leurs valeurs de chaîne réelles.
Par exemple, si votre ancien code ressemble à ceci :
{
"hello": {
"description": "Hello, world!"
}
}export default function MyComponent() {
const { t } = useTranslation()
return <div>{t('hello.description')}</div>
}Vous devrez le remplacer par :
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 : Migrer entièrement votre projet, mais continuer à utiliser les dictionnaires de l'ancienne bibliothèque i18n
Supposons que vous souhaitiez migrer votre projet vers gt-next, mais que vous souhaitez continuer à utiliser les dictionnaires de l'ancienne bibliothèque i18n
et n'utiliser les fonctionnalités in-line de GT que pour le nouveau contenu.
Dans ce cas, vous pouvez faire quelque chose de similaire à l'option 1 :
Trouvez toutes les occurrences de votre ancienne bibliothèque i18n, comme les hooks useTranslation, et remplacez-les par des hooks useDict.
Le hook useDict se comporte de manière très similaire aux hooks useTranslation, et vous pouvez l'utiliser de la même façon.
import { useTranslation } from 'react-i18next'
export default function MyComponent() {
const { t } = useTranslation()
return <div>{t('hello.description')}</div>
}import { useDict } from 'gt-next'
export default function MyComponent() {
const t = useDict()
return <div>{t('hello.description')}</div>
}En ce qui concerne la 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 dictionnaires 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-next
Cette option est la plus flexible, et nécessitera le moins de modifications de code en une seule fois.
Dans ce cas, vous pouvez faire quelque chose de similaire à l'option 2, mais ne migrer 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 d'autres et pour le nouveau contenu.
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.
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 modification de votre contenu à l'avenir et rendra votre base de code beaucoup plus lisible.
2. Utilisez le hook useDict pour le contenu existant
Le hook useDict est un excellent moyen de continuer à utiliser vos dictionnaires existants.
Nous le proposons pour faciliter la migration, mais nous ne recommandons pas de l'utiliser pour du nouveau contenu.
3. Utilisation de l'IA
Si vous utilisez l'IA pour vous aider à migrer votre projet, nous mettons à disposition un LLMs.txt et un LLMs-full.txt à l'adresse suivante :
Ces fichiers contiennent l'intégralité du contenu de cette documentation, afin que votre outil d'IA ait accès à toutes les informations nécessaires pour vous aider à migrer votre projet.
Comment trouvez-vous ce guide ?