GitHub

Aperçu

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

Nous proposerons également quelques conseils et recommandations pour rendre la migration aussi fluide que 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 vos traductions dans des fichiers JSON. Tout votre contenu est directement intégré à 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 des traductions.
Expérimentez en dev : Testez facilement vos traductions en développement grâce au rechargement à chaud.

Configuration

Installez gt-next et l’outil 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>
  )
}

Ajoutez ensuite 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 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 dictionaries 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 votre projet

C’est l’option la plus simple en théorie, mais aussi celle qui demandera le plus grand nombre 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.

Vous devrez ensuite remplacer toutes les clés de chaînes par leurs valeurs de chaînes réelles.

Par exemple, si votre ancien code ressemble à ceci :

dictionary.json

{
  "hello": {
    "description": "Bonjour le 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 le monde !')}</div>
}
// OU
export default function MyComponent() {
  return <T>Bonjour le monde !</T>
}

Faites ceci 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 n’exploiter les fonctionnalités en ligne de GT que pour le nouveau contenu.

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

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

Le hook useTranslations se comporte de manière très similaire 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 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 dictionary dans ce nouveau fichier.

La fonction d’initialisation withGTConfig dans next.config.js détectera automatiquement le fichier dictionary à la racine de votre 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 demandera le moins de modifications de code d’un seul coup.

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 ainsi que 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 entraîner des bugs.

Conseils pour la migration

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

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

Cela facilitera considérablement 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 existantes.

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 à disposition les fichiers LLMs.txt et LLMs-full.txt à l’adresse :

Aperçu

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

Nous proposerons également quelques conseils et recommandations pour rendre la migration aussi fluide que 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 vos traductions dans des fichiers JSON. Tout votre contenu est directement intégré à 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 des traductions.
Expérimentez en dev : Testez facilement vos traductions en développement grâce au rechargement à chaud.

Configuration

Installez gt-next et l’outil 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>
  )
}

Ajoutez ensuite 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 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 dictionaries 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 votre projet

C’est l’option la plus simple en théorie, mais aussi celle qui demandera le plus grand nombre 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.

Vous devrez ensuite remplacer toutes les clés de chaînes par leurs valeurs de chaînes réelles.

Par exemple, si votre ancien code ressemble à ceci :

dictionary.json

{
  "hello": {
    "description": "Bonjour le 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 le monde !')}</div>
}
// OU
export default function MyComponent() {
  return <T>Bonjour le monde !</T>
}

Faites ceci 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 façon similaire à l’Option 1 :

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

Le hook useTranslations se comporte de manière très similaire 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 de votre 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 demandera le moins de modifications de code d’un seul coup.

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 ainsi que 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 entraîner des bugs.

Conseils pour la migration

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

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

Cela facilitera considérablement 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 existantes.

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 à disposition les fichiers LLMs.txt et LLMs-full.txt à l’adresse :

Aperçu

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

Nous proposerons également quelques conseils et recommandations pour rendre la migration aussi fluide que 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 vos traductions dans des fichiers JSON. Tout votre contenu est directement intégré à 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 des traductions.
Expérimentez en dev : Testez facilement vos traductions en développement grâce au rechargement à chaud.

Configuration

Installez gt-next et l’outil 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>
  )
}

Ajoutez ensuite 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 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 dictionaries 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 votre projet

C’est l’option la plus simple en théorie, mais aussi celle qui demandera le plus grand nombre 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.

Vous devrez ensuite remplacer toutes les clés de chaînes par leurs valeurs de chaînes réelles.

Par exemple, si votre ancien code ressemble à ceci :

dictionary.json

{
  "hello": {
    "description": "Bonjour le 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 le monde !')}</div>
}
// OU
export default function MyComponent() {
  return <T>Bonjour le monde !</T>
}

Faites ceci 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 façon similaire à l’Option 1 :

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

Le hook useTranslations se comporte de manière très similaire 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 de votre 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 demandera le moins de modifications de code d’un seul coup.

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 ainsi que 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 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