Migration vers gt-next

Aperçu

Ce guide vous accompagnera dans l'internationalisation de votre application Next.js existante en utilisant gt-next comme bibliothèque i18n autonome. Ce guide peut également vous aider à migrer d'une autre bibliothèque i18n vers gt-next.

Toutes les traductions sont stockées dans le dépôt de votre projet et sont gérées par vous. De plus, vous apportez vos propres traductions. Cela signifie que vous n'aurez pas besoin d'ajouter des clés API.

Si vous souhaitez générer automatiquement des traductions pour vos fichiers JSON, veuillez consulter l'outil CLI.

Comment ça fonctionne

Les traductions peuvent être stockées dans des fichiers JSON appelés "dictionnaires" (en.json, fr.json, etc.). Les clés sont utilisées comme références, et les valeurs sont le contenu traduit :

public/dictionaries/en.json

{
  "greeting": "Hello, World!",
}

public/dictionaries/fr.json

{
  "greeting": "Bonjour, le monde!",
}

Les traductions sont ensuite référencées dans votre application avec le hook useDict() et la fonction getDict() :

components/MyComponent.js

import { useDict } from 'gt-next/client';
import { getDict } from 'gt-next/server';
 
export default function MyComponent() {
  const d = useDict(); // côté client
  const d = await getDict(); // côté serveur
  return (
    <div>
      <h1>{d('greeting')}</h1>
    </div>
  );
}

Remarque : Comme ces traductions sont gérées par vous, vous devrez les mettre à jour manuellement à mesure que votre application évolue. Cela signifie que chaque fois que vous ajoutez ou modifiez du contenu, vous devrez mettre à jour vos fichiers de traduction.

Envisagez d'utiliser l'outil CLI si vous êtes intéressé par l'automatisation de ce processus.

Configuration

1. Activer les traductions

Utilisez le plugin withGTConfig() pour configurer le comportement i18n de votre application Next.js.

next.config.js

import { withGTConfig } from 'gt-next';
 
const nextConfig = {
  // Votre configuration Next.js
};
 
export default withGTConfig(nextConfig, {
  locales: ['en', 'fr'], // Locales supportées (Anglais, Français)
});

2. Ajouter le fichier de chargement du dictionnaire

Cette fonction loadDictionary() est responsable du chargement de vos traductions. Toutes les traductions sont stockées dans des fichiers JSON imbriqués appelés dictionnaires.

Ici, nous spécifions que nos fichiers de traduction sont stockés dans le répertoire /public/dictionaries/.

src/loadDictionary.js

export default async function loadDictionary(locale) {
  const t = await import(`../public/dictionaries/${locale}.json`);
  return t.default;
}

3. Envelopper votre application dans un `<GTProvider>`

Enveloppez votre application dans un <GTProvider> pour activer le contexte de traduction. Cela vous permet d'accéder aux traductions dans les composants côté client.

layout.js

import { GTProvider } from 'gt-next';
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

4. Créer vos fichiers de traduction

Vos fichiers de traduction doivent être stockés dans le répertoire ./public/dictionaries. Chaque fichier doit être nommé d'après la locale qu'il représente, par exemple en.json, fr.json, etc.

public/dictionaries/en.json

{
  "greeting": "Hello, World!",
}

Puis ajoutez les fichiers de traduction du dictionnaire français correspondants :

public/dictionaries/fr.json

{
  "greeting": "Bonjour, le monde!",
}

5. Utilisez vos traductions !

Vous pouvez maintenant accéder à vos traductions avec useDict() et getDict().

components/MyComponent.js

import { useDict } from 'gt-next/client';
import { getDict } from 'gt-next/server';
 
export default function MyComponent() {
  const d = useDict(); // côté client
  const d = await getDict(); // côté serveur
  return (
    <div>
     {/* en: "Hello, World!"  fr: "Bonjour, le monde!" */}
      <h1>{d('greeting')}</h1> // [!code highlight]
    </div>
  );
}

Astuce : Pour plus d'informations sur la syntaxe du dictionnaire, comme l'insertion de variables, consultez la référence du dictionnaire.

Compatibilité

Ce guide vous aide à migrer d'une autre bibliothèque i18n vers gt-next. Le format du dictionnaire est généralement compatible avec d'autres bibliothèques.

Nos dictionnaires prennent en charge les variables, les dates et l'interpolation de nombres. Consultez les options du dictionnaire pour plus d'informations.

Cependant, si votre projet utilise une syntaxe complexe comme les pluriels ou les branches, vous devrez convertir ces éléments vers la syntaxe gt-next.

Consultez la page Composants de branchement pour plus d'informations sur la syntaxe gt-next.

Notes

Utilisez gt-next pour gérer manuellement les traductions dans votre projet.
Les traductions sont stockées dans des fichiers JSON appelés "dictionnaires" (en.json, fr.json, etc.).
Utilisez useDict() et getDict() pour accéder à vos traductions.

Prochaines étapes

Pour plus d'informations sur la syntaxe du dictionnaire, consultez la référence du dictionnaire.
Envisagez d'utiliser la commande translate si vous êtes intéressé par l'automatisation du processus de traduction.

Migration vers gt-next

Sur cette page