# gt-next: General Translation Next.js SDK: Traduire des chaînes
URL: https://generaltranslation.com/fr/docs/next/tutorials/translating-strings.mdx
---
title: Traduire des chaînes
description: Comment traduire des chaînes
---

## Vue d’ensemble

Ce guide propose un tutoriel pas à pas pour traduire des chaînes dans votre application Next.js à l’aide de
[`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) et [`tx`](/docs/next/api/strings/tx).

## Prérequis

Nous supposons que vous avez déjà installé `gt-next` dans votre projet et que vous avez suivi, ou que vous suivez actuellement, le [guide de démarrage rapide](/docs/next).

## Traduction de chaînes

### Composants côté client

Pour toute chaîne du côté client, utilisez [`useGT`](/docs/next/api/strings/use-gt).
N&#39;oubliez pas que `useGT` doit être appelé dans un composant enfant de [`<GTProvider>`](/docs/next/api/components/gtprovider).

```jsx title="src/components/MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

### Composants côté serveur

Pour les chaînes côté serveur, utilisez [`getGT`](/docs/next/api/strings/get-gt).

```jsx title="src/pages/index.jsx" copy
import { getGT } from 'gt-next/server';

export default async function Home() {
  const gt = await getGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Remarque :**
  En développement, si vous traduisez du contenu à l’exécution, vous devrez actualiser la page pour voir la version traduite d’une chaîne issue de [`getGT`](/docs/next/api/strings/get-gt).
  **Cela ne se produit pas en production.**
</Callout>

### Ajout de variables

Les variables sont des valeurs qui peuvent changer, mais ne sont pas traduites.
Pour ajouter des variables à vos chaînes, utilisez le modèle suivant :

```jsx title="MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT();
  return (
    <div>
      <h1>{gt('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}
```

Cela fonctionne aussi bien avec [`useGT`](/docs/next/api/strings/use-gt) qu’avec [`getGT`](/docs/next/api/strings/get-gt).


### Contenu dynamique

Supposons que vous ayez une chaîne variable.
Vous pouvez utiliser la fonction [`tx`](/docs/next/api/strings/tx) pour traduire cette chaîne à l&#39;exécution.

```jsx title="MyComponent.jsx" copy
import { tx } from 'gt-next/server';

export default async function MyComponent({ username }) {
  const translation = await tx(`Hello, ${username}. How is your day?`); // [!code highlight]
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **Remarque :**
  La fonction [`tx`](/docs/next/api/strings/tx) est disponible uniquement côté serveur et ne doit être utilisée qu’en cas de besoin.
  La traduction à l’exécution entraîne souvent un délai.
  Utilisez [`getGT`](/docs/next/api/strings/get-gt) ou [`useGT`](/docs/next/api/strings/use-gt) chaque fois que possible pour traduire avant le déploiement.
</Callout>

***


## Remarques

* Pour traduire des chaînes, utilisez [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) et [`tx`](/docs/next/api/strings/tx).
* `useGT` et `getGT` traduisent avant le déploiement, tandis que `tx` traduit à l’exécution. Utilisez `tx` avec parcimonie.
* Vous pouvez ajouter des variables aux chaînes avec le modèle `{ variables: { key: value } }`.

## Étapes suivantes

* Revenez au [guide de démarrage rapide](/docs/next) pour terminer la configuration de votre projet pour la traduction.
* Consultez la référence de l’API pour [`useGT`](/docs/next/api/strings/use-gt), [`getGT`](/docs/next/api/strings/get-gt) et [`tx`](/docs/next/api/strings/tx).