# gt-next: General Translation Next.js SDK: Présentation
URL: https://generaltranslation.com/fr/docs/next/introduction.mdx
---
title: Présentation
description: Présentation du SDK Next.js de General Translation
---
## Introduction
Le SDK Next.js de General Translation est une bibliothèque d’internationalisation (i18n) open source pour les applications Next.js.
Il fournit un ensemble complet d’outils pour internationaliser votre application Next.js de manière simple et facile à maintenir, avec une parité fonctionnelle avec d’autres bibliothèques i18n populaires. Basé sur le [SDK React](/docs/react), il offre des fonctionnalités supplémentaires spécifiques à Next.js.
Le SDK peut être utilisé de façon autonome, sans la plateforme General Translation, et se comporte comme les autres bibliothèques i18n.
Cependant, il s’intègre aussi à notre plateforme pour offrir des fonctionnalités avancées :
* 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
Voici les 6 principaux concepts à comprendre concernant le SDK.
Initialisation avec [`withGTConfig`](/docs/next/api/config/with-gt-config)
Le composant [``](/docs/next/api/components/gtprovider)
Le composant [``](/docs/next/api/components/t)
Le hook [`useGT`](/docs/next/api/strings/use-gt)
La fonction [`msg`](/docs/next/api/strings/msg) pour les chaînes partagées
(Facultatif) Le hook [`useTranslations`](/docs/next/api/dictionary/use-translations)
## Initialisation avec `withGTConfig`
La fonction [`withGTConfig`](/docs/next/api/config/with-gt-config) initialise le SDK dans votre application Next.js.
Ajoutez-la au fichier `next.config.[js|ts]` pour configurer le SDK :
```tsx title="next.config.ts"
import { withGTConfig } from 'gt-next/config';
const nextConfig = {
// Vos options next.config.ts
};
export default withGTConfig(nextConfig, {
// Votre configuration GT
});
```
Voir la [référence de l’API withGTConfig](/docs/next/api/config/with-gt-config) pour plus d’informations.
## Le composant ``
Le composant [``](/docs/next/api/components/gtprovider) fournit à votre application le contexte de traduction, y compris la langue actuelle et les traductions correspondantes.
```tsx
import { GTProvider } from 'gt-next';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
**Important :** le provider doit englober l’ensemble de votre application et être placé aussi haut que possible dans l’arborescence des composants, par exemple dans votre layout racine.
Le provider n’est requis que pour les fonctionnalités côté client. Les applications uniquement côté serveur n’en ont pas besoin, mais il peut tout de même être inclus.
Consultez la référence de l’API [`GTProvider`](/docs/next/api/components/gtprovider) pour plus d’informations.
## Le composant ``
Le composant [``](/docs/next/api/components/t) est la méthode recommandée pour traduire le contenu de votre application.
Il s’agit d’un composant React qui peut encapsuler n’importe quel élément JSX et afficher automatiquement le contenu de cet élément dans une langue prise en charge.
Nous vous recommandons d’utiliser le composant [``](/docs/next/api/components/t) dès que possible, car c’est lui qui offre le plus de flexibilité pour les traductions.
Contrairement aux chaînes, le composant [``](/docs/next/api/components/t) permet de traduire du contenu HTML, ce qui le rend beaucoup plus puissant que les traductions de chaînes.
### Exemples
```tsx
Hello, world!
```
```tsx
Here is an image
```
```tsx
Formatting can be done easily with the `` component.
{1000}{new Date()}{1000}
```
Le composant [``](/docs/next/api/components/t) fonctionne avec des [composants variables](/docs/next/guides/variables) comme [``](/docs/next/api/components/num), [``](/docs/next/api/components/datetime) et [``](/docs/next/api/components/currency) pour formater du contenu dynamique.
Consultez le [guide du composant [``]](/docs/next/guides/t) pour découvrir les différentes façons d’utiliser le composant [``](/docs/next/api/components/t).
## Le hook `useGT`
Le hook [`useGT`](/docs/next/api/strings/use-gt) est un hook React qui peut être utilisé de manière similaire au composant [``](/docs/next/api/components/t), avec certains compromis.
Ce hook renvoie une fonction permettant de traduire des chaînes.
```tsx
const gt = useGT();
gt('Hello, world!');
```
Par rapport au composant [``](/docs/next/api/components/t), le hook [`useGT`](/docs/next/api/strings/use-gt) offre plus de flexibilité dans votre base de code.
Par exemple, si vous avez une structure de données complexe contenant des chaînes imbriquées, un composant [``](/docs/next/api/components/t) serait plus difficile à utiliser.
```tsx
const gt = useGT();
const data = {
title: gt('Hello, world!'),
description: gt('This is a description'),
};
```
Consultez le guide [chaînes](/docs/next/guides/strings) pour en savoir plus sur le hook [`useGT`](/docs/next/api/strings/use-gt).
## La fonction `msg`
La fonction [`msg`](/docs/next/api/strings/msg) permet de marquer des chaînes à traduire utilisées dans plusieurs composants ou stockées dans des objets de configuration.
C'est particulièrement utile pour le contenu partagé, comme les libellés de navigation, les messages de formulaire ou tout texte qui apparaît à plusieurs endroits de votre application.
```tsx
// Marquer les chaînes pour la traduction
import { msg } from 'gt-next';
const navItems = [
{ label: msg('Home'), href: '/' },
{ label: msg('About'), href: '/about' },
{ label: msg('Contact'), href: '/contact' }
];
```
```tsx
// Décoder et utiliser les chaînes marquées
import { useMessages } from 'gt-next';
function Navigation() {
const m = useMessages();
return (
);
}
```
La fonction [`msg`](/docs/next/api/strings/msg) encode des chaînes avec des métadonnées de traduction, et [`useMessages`](/docs/next/api/strings/use-messages) (ou [`getMessages`](/docs/next/api/strings/get-messages) pour les composants côté serveur) les décodent.
Utilisez [`msg`](/docs/next/api/strings/msg) pour le contenu partagé qui doit être traduit de façon cohérente dans toute l’application. Pour le contenu propre à un composant, privilégiez [``](/docs/next/api/components/t) ou [`useGT`](/docs/next/api/strings/use-gt).
Consultez le guide des [chaînes partagées](/docs/next/guides/shared-strings) pour en savoir plus sur la fonction `msg`.
## Le hook `useTranslations`
Le hook [`useTranslations`](/docs/next/api/dictionary/use-translations) est un hook React qui renvoie une fonction permettant de récupérer les traductions associées à une clé donnée.
```tsx title="dictionary.ts"
const dictionary = {
hello: {
world: 'Hello, world!',
},
};
```
```tsx title="App.tsx"
const translate = useTranslations();
translate('hello.world');
```
Ce comportement est similaire à celui d'autres bibliothèques de traduction, comme [`react-i18next`](https://react.i18next.com/) et [`next-intl`](https://next-intl-docs.vercel.app/).
Nous ne recommandons pas d'utiliser le hook [`useTranslations`](/docs/next/api/dictionary/use-translations) dans votre application. Une utilisation fréquente du hook [`useTranslations`](/docs/next/api/dictionary/use-translations) rendra votre base de code plus difficile à maintenir
et entraînera une dette technique importante.
À la place, nous vous recommandons d'utiliser le composant [``](/docs/next/api/components/t) ou le hook [`useGT`](/docs/next/api/strings/use-gt).
Si vous migrez depuis une autre bibliothèque d'i18n, le hook [`useTranslations`](/docs/next/api/dictionary/use-translations) est un remplacement direct et peut être utile pour migrer progressivement votre base de code.
Consultez le guide des [dictionnaires](/docs/next/guides/dictionaries) pour en savoir plus sur le hook [`useTranslations`](/docs/next/api/dictionary/use-translations).
Consultez la [référence de l'API useTranslations](/docs/next/api/dictionary/use-translations) pour plus d'informations.
***
## Étapes suivantes
**Voyez-le en action :** Parcourez des [applications d’exemple fonctionnelles](/docs/next/tutorials/examples) présentant chaque approche, ou explorez le [catalogue complet des applications](https://app-catalog.generaltranslation.dev).
* Découvrez comment configurer votre projet Next.js avec le SDK : [Démarrage rapide](/docs/next)
* Découvrez comment traduire du contenu JSX avec le composant [``](/docs/next/api/components/t) : [Guide de traduction JSX](/docs/next/guides/t)
* Découvrez comment traduire des chaînes avec le hook [`useGT`](/docs/next/api/strings/use-gt) : [Guide de traduction des chaînes](/docs/next/guides/strings)
* Découvrez les chaînes partagées avec la fonction [`msg`](/docs/next/api/strings/msg) : [Guide des chaînes partagées](/docs/next/guides/shared-strings)
