Migration

Présentation

Ce guide explique les étapes nécessaires pour migrer un projet qui utilise déjà une bibliothèque i18n vers gt-next.

Nous partagerons également quelques conseils et recommandations pour que la migration se déroule le plus facilement possible.

Prérequis

Un projet utilisant actuellement une autre bibliothèque i18n.
Une compréhension 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 : Ne gérez plus jamais les traductions dans des fichiers JSON. Tout votre contenu reste directement dans votre code, là où il doit être.
Traductions automatiques : Générez des traductions de haute qualité, sensibles au contexte, avec notre outil CLI. Vous n’aurez plus jamais à attendre des traductions.
Expérimentez en dev : Expérimentez facilement les traductions en développement grâce au rechargement à chaud.

Configuration

Installez gt-next et l’outil en ligne de commande (CLI) gtx-cli.

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Créez un fichier gt.config.json à la racine de votre projet contenant une propriété defaultLocale et un tableau locales.

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

Ensuite, ajoutez le composant <GTProvider> à la mise en page racine de votre application.

app/layout.tsx

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.

next.config.ts

import withGTConfig from 'gt-next/config'
const nextConfig = {
  // Vos options next.config.ts
}
export default withGTConfig(nextConfig, {
  // Votre configuration GT
})

Pour des étapes plus détaillées, consultez le guide de démarrage rapide.

À ce stade, vous avez trois options :

Migrer entièrement votre projet vers gt-next et supprimer l’ancienne bibliothèque i18n.
Migrer entièrement votre projet, mais continuer d’utiliser les dictionnaires de l’ancienne bibliothèque i18n.
Continuer d’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 l’intégralité de votre projet

C’est l’option la plus simple, mais aussi celle qui demandera le plus de modifications de code en une seule fois.

Après avoir configuré votre projet, recherchez toutes les occurrences de votre ancienne bibliothèque i18n et remplacez‑les 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, remplacez toutes les clés de chaînes par leurs valeurs textuelles effectives.

Par exemple, si votre ancien code ressemble à ceci :

dictionary.json

{
  "hello": {
    "description": "Bonjour, monde !"
  }
}

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('Bonjour, monde !')}</div>
}
// OR
export default function MyComponent() {
  return <T>Bonjour, monde !</T>
}

Effectuez cette opération pour toutes les occurrences de votre ancienne bibliothèque i18n.

Option 2: Migrer entièrement votre projet, tout en continuant d’utiliser les dictionaries de l’ancienne bibliothèque i18n

Supposons que vous souhaitiez migrer votre projet vers gt-next, mais continuer à utiliser les dictionaries de l’ancienne bibliothèque i18n et réserver les fonctionnalités inline de GT au nouveau contenu.

Dans ce cas, vous pouvez procéder de manière similaire à l’option 1 :

Repérez toutes les occurrences de votre ancienne bibliothèque i18n, comme les hooks useTranslations, et remplacez‑les par les hooks useTranslations de gt-next.

Le hook useTranslations se comporte très semblablement aux hooks useTranslations des autres bibliothèques i18n, 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 { useTranslations } from 'gt-next'
export default function MyComponent() {
  const t = useTranslations()
  return <div>{t('hello.description')}</div>
}

Côté configuration, vous devez créer un fichier dictionary.[js|ts|json] à la racine du projet ou dans le répertoire src. Copiez le contenu de votre ancien fichier dictionary dans ce nouveau fichier.

La fonction d’initialisation withGTConfig dans next.config.js détectera automatiquement le fichier dictionary à la racine du projet ou dans le répertoire src.

Consultez le guide dictionaries pour plus de détails.

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

Cette option est la plus flexible et nécessitera le moins de changements de code en une seule fois.

Dans ce cas, vous pouvez procéder de manière 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 ainsi que 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 pour la migration

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

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

Cela facilitera grandement la modification de votre contenu à l’avenir et rendra votre codebase bien plus lisible.

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

Le hook useTranslations est un excellent moyen de continuer à utiliser vos dictionaries existants.

Nous le proposons pour faciliter la migration, mais nous ne recommandons pas de l’utiliser pour de nouveaux contenus.

3. Utiliser l’IA

Si vous utilisez l’IA pour vous aider à migrer votre projet, nous mettons à disposition les fichiers LLMs.txt et LLMs-full.txt à l’adresse suivante :

Présentation

Ce guide explique les étapes nécessaires pour migrer un projet qui utilise déjà une bibliothèque i18n vers gt-next.

Nous partagerons également quelques conseils et recommandations pour que la migration se déroule le plus facilement possible.

Prérequis

Un projet utilisant actuellement une autre bibliothèque i18n.
Une compréhension 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 : Ne gérez plus jamais les traductions dans des fichiers JSON. Tout votre contenu reste directement dans votre code, là où il doit être.
Traductions automatiques : Générez des traductions de haute qualité, sensibles au contexte, avec notre outil CLI. Vous n’aurez plus jamais à attendre des traductions.
Expérimentez en dev : Expérimentez facilement les traductions en développement grâce au rechargement à chaud.

Configuration

Installez gt-next et l’outil en ligne de commande (CLI) gtx-cli.

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Créez un fichier gt.config.json à la racine de votre projet contenant une propriété defaultLocale et un tableau locales.

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

Ensuite, ajoutez le composant <GTProvider> à la mise en page racine de votre application.

app/layout.tsx

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.

next.config.ts

import withGTConfig from 'gt-next/config'
const nextConfig = {
  // Vos options next.config.ts
}
export default withGTConfig(nextConfig, {
  // Votre configuration GT
})

Pour des étapes plus détaillées, consultez le guide de démarrage rapide.

À ce stade, vous avez trois options :

Migrer entièrement votre projet vers gt-next et supprimer l’ancienne bibliothèque i18n.
Migrer entièrement votre projet, mais continuer d’utiliser les dictionnaires de l’ancienne bibliothèque i18n.
Continuer d’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 l’intégralité de votre projet

C’est l’option la plus simple, mais aussi celle qui demandera le plus de modifications de code en une seule fois.

Après avoir configuré votre projet, recherchez toutes les occurrences de votre ancienne bibliothèque i18n et remplacez‑les 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, remplacez toutes les clés de chaînes par leurs valeurs textuelles effectives.

Par exemple, si votre ancien code ressemble à ceci :

dictionary.json

{
  "hello": {
    "description": "Bonjour, monde !"
  }
}

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('Bonjour, monde !')}</div>
}
// OR
export default function MyComponent() {
  return <T>Bonjour, monde !</T>
}

Effectuez cette opération pour toutes les occurrences de votre ancienne bibliothèque i18n.

Option 2: Migrer entièrement votre projet, tout en continuant d’utiliser les dictionaries de l’ancienne bibliothèque i18n

Dans ce cas, vous pouvez procéder de manière similaire à l’option 1 :

Repérez toutes les occurrences de votre ancienne bibliothèque i18n, comme les hooks useTranslations, et remplacez‑les par les hooks useTranslations de gt-next.

Le hook useTranslations se comporte très semblablement aux hooks useTranslations des autres bibliothèques i18n, 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 { useTranslations } from 'gt-next'
export default function MyComponent() {
  const t = useTranslations()
  return <div>{t('hello.description')}</div>
}

La fonction d’initialisation withGTConfig dans next.config.js détectera automatiquement le fichier dictionary à la racine du projet ou dans le répertoire src.

Consultez le guide dictionaries pour plus de détails.

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

Cette option est la plus flexible et nécessitera le moins de changements de code en une seule fois.

Dans ce cas, vous pouvez procéder de manière 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 ainsi que 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 pour la migration

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

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

Cela facilitera grandement la modification de votre contenu à l’avenir et rendra votre codebase bien plus lisible.

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

Le hook useTranslations est un excellent moyen de continuer à utiliser vos dictionaries existants.

Nous le proposons pour faciliter la migration, mais nous ne recommandons pas de l’utiliser pour de nouveaux contenus.

3. Utiliser l’IA

Si vous utilisez l’IA pour vous aider à migrer votre projet, nous mettons à disposition les fichiers LLMs.txt et LLMs-full.txt à l’adresse suivante :

Présentation

Ce guide explique les étapes nécessaires pour migrer un projet qui utilise déjà une bibliothèque i18n vers gt-next.

Nous partagerons également quelques conseils et recommandations pour que la migration se déroule le plus facilement possible.

Prérequis

Un projet utilisant actuellement une autre bibliothèque i18n.
Une compréhension 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 : Ne gérez plus jamais les traductions dans des fichiers JSON. Tout votre contenu reste directement dans votre code, là où il doit être.
Traductions automatiques : Générez des traductions de haute qualité, sensibles au contexte, avec notre outil CLI. Vous n’aurez plus jamais à attendre des traductions.
Expérimentez en dev : Expérimentez facilement les traductions en développement grâce au rechargement à chaud.

Configuration

Installez gt-next et l’outil en ligne de commande (CLI) gtx-cli.

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

Créez un fichier gt.config.json à la racine de votre projet contenant une propriété defaultLocale et un tableau locales.

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["en", "fr", "es"]
}

Ensuite, ajoutez le composant <GTProvider> à la mise en page racine de votre application.

app/layout.tsx

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.

next.config.ts

import withGTConfig from 'gt-next/config'
const nextConfig = {
  // Vos options next.config.ts
}
export default withGTConfig(nextConfig, {
  // Votre configuration GT
})

Pour des étapes plus détaillées, consultez le guide de démarrage rapide.

À ce stade, vous avez trois options :

Migrer entièrement votre projet vers gt-next et supprimer l’ancienne bibliothèque i18n.
Migrer entièrement votre projet, mais continuer d’utiliser les dictionnaires de l’ancienne bibliothèque i18n.
Continuer d’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 l’intégralité de votre projet

C’est l’option la plus simple, mais aussi celle qui demandera le plus de modifications de code en une seule fois.

Après avoir configuré votre projet, recherchez toutes les occurrences de votre ancienne bibliothèque i18n et remplacez‑les 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, remplacez toutes les clés de chaînes par leurs valeurs textuelles effectives.

Par exemple, si votre ancien code ressemble à ceci :

dictionary.json

{
  "hello": {
    "description": "Bonjour, monde !"
  }
}

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('Bonjour, monde !')}</div>
}
// OR
export default function MyComponent() {
  return <T>Bonjour, monde !</T>
}

Effectuez cette opération pour toutes les occurrences de votre ancienne bibliothèque i18n.

Option 2: Migrer entièrement votre projet, tout en continuant d’utiliser les dictionaries de l’ancienne bibliothèque i18n

Dans ce cas, vous pouvez procéder de manière similaire à l’option 1 :

Repérez toutes les occurrences de votre ancienne bibliothèque i18n, comme les hooks useTranslations, et remplacez‑les par les hooks useTranslations de gt-next.

Le hook useTranslations se comporte très semblablement aux hooks useTranslations des autres bibliothèques i18n, 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 { useTranslations } from 'gt-next'
export default function MyComponent() {
  const t = useTranslations()
  return <div>{t('hello.description')}</div>
}

La fonction d’initialisation withGTConfig dans next.config.js détectera automatiquement le fichier dictionary à la racine du projet ou dans le répertoire src.

Consultez le guide dictionaries pour plus de détails.

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

Cette option est la plus flexible et nécessitera le moins de changements de code en une seule fois.

Dans ce cas, vous pouvez procéder de manière 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 ainsi que 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.

Migration

Sur cette page

Migration

Sur cette page

Migration

Sur cette page

GitHubMettre une étoile sur GitHub

GitHubMettre une étoile sur GitHub

Mettre une étoile sur GitHub

Mettre une étoile sur GitHub