Aperçu

Introduction

Le SDK General Translation Next.js est une bibliothèque d'internationalisation (i18n) open-source pour Next.js.

Il offre un ensemble d'outils pour vous aider à internationaliser votre application Next.js de manière facile et maintenable, avec une parité de fonctionnalités par rapport aux autres bibliothèques i18n populaires. Il est construit au-dessus du SDK React, et offre des fonctionnalités supplémentaires spécifiques à Next.js.

Le SDK Next.js peut être utilisé sans la plateforme General Translation, et fonctionnera de manière très similaire aux autres bibliothèques i18n.

Cependant, il s'intègre également avec notre plateforme, offrant des fonctionnalités supplémentaires telles que :

• Rechargement à chaud des traductions en développement
• Traductions automatiques par IA
• Synchronisation des traductions avec la plateforme General Translation
• Intégration native avec notre CDN de traduction
• Traduction à la demande des composants React en production (côté serveur)

Concepts

Il y a 5 concepts principaux à comprendre concernant le SDK.

Initialisation avec withGTConfig

La fonction withGTConfig est une fonction qui est utilisée pour initialiser le SDK dans une application Next.js.

Elle doit être placée dans votre fichier next.config.[js|ts], et est utilisée pour configurer le SDK.

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // Your next.config.ts options
};

export default withGTConfig(nextConfig, {
  // Your GT configuration
});

Voir la Référence API withGTConfig pour plus d'informations.

Le composant <GTProvider>

import { GTProvider } from 'gt-next';

Le composant <GTProvider> est le composant principal que vous devez ajouter à votre application.

Il est utilisé pour fournir au reste de votre application un contexte.

Ce contexte inclut la langue actuelle et les traductions pertinentes pour cette langue.

Le provider n'est requis que si vous utilisez des fonctionnalités côté client. Si vous utilisez uniquement des fonctionnalités côté serveur, le provider n'est pas requis, mais peut tout de même être inclus.

Considérations importantes

• Le provider doit envelopper toute votre application.
• Idéalement, il devrait être placé aussi haut que possible dans l'arbre, comme dans votre layout racine.

Consultez la page GTProvider pour plus d'informations.

Le composant <T>

Le composant <T> est la méthode recommandée pour traduire le contenu dans votre application.

Il s'agit d'un composant React qui peut être utilisé pour envelopper n'importe quel élément JSX, et qui rendra automatiquement le contenu de l'élément dans une langue prise en charge.

Exemples

<T>
  <div>Hello, world!</div>
</T>

<T>
  <div>
    <h1> Here is an image </h1>
    <img src="https://example.com/image.png" alt="Example" />
  </div>
</T>

<T>
  Formatting can be done easily with the `<T>` component.
  <Num>{1000}</Num>
  <DateTime>{new Date()}</DateTime>
  <Currency>{1000}</Currency>
</T>

Consultez le guide composants pour apprendre les différentes façons d'utiliser le composant <T>.

Consultez la Référence API T pour l'API du composant <T>.

Le hook useGT

Le hook useGT est un hook React qui peut être utilisé de manière similaire au composant <T>, avec quelques compromis.

Le hook retourne une fonction qui peut être utilisée pour traduire des chaînes de caractères.

const translate = useGT();

translate('Hello, world!');

Comparé au composant <T>, le hook useGT permet plus de flexibilité dans votre base de code.

Par exemple, si vous avez une structure de données complexe avec des chaînes imbriquées, un composant <T> serait plus difficile à utiliser.

const t = useGT();
const data = {
  title: t('Hello, world!'),
  description: t('This is a description'),
};

Consultez le guide strings pour en savoir plus sur le hook useGT.

Consultez la Référence API useGT pour plus d'informations.

Le hook useDict

Le hook useDict est un hook React qui retourne une fonction qui peut être utilisée pour récupérer les traductions pour une clé donnée.

const dictionary = {
  hello: {
    world: 'Hello, world!',
  },
};

const translate = useDict();
translate('hello.world');

Ce comportement est similaire à d'autres bibliothèques de traduction, telles que react-i18next et next-intl.

Consultez le guide dictionaries pour en savoir plus sur le hook useDict.

Consultez la Référence API useDict pour plus d'informations.

Prochaines étapes

• Apprenez comment configurer votre projet Next.js avec le SDK : Démarrage rapide
• Apprenez comment traduire des chaînes de caractères avec le hook useGT : Traduire des chaînes de caractères
• Apprenez comment traduire du contenu JSX avec le composant <T> : Traduire du JSX