# gt-next: General Translation Next.js SDK: useTranslations
URL: https://generaltranslation.com/fr/docs/next/api/dictionary/use-translations.mdx
---
title: useTranslations
description: Référence de l’API pour le Hook useTranslations
---

## Vue d’ensemble

`useTranslations` permet d’accéder aux traductions de chaînes de caractères depuis le [dictionnaire de traduction](/docs/next/guides/dictionaries).

Il doit être utilisé dans un composant enveloppé par un [`<GTProvider>`](/docs/next/api/components/gtprovider).

```jsx
const t = useTranslations(); // Récupérer la fonction de traduction
t('greeting.hello'); // passer l'id pour obtenir une traduction
```

Pour les composants asynchrones, consultez [`getTranslations`](/docs/next/api/dictionary/get-translations).

<Callout>
  `getTranslations` et `useTranslations` utilisent un [dictionnaire](/docs/next/guides/dictionaries) pour stocker tout le contenu à traduire.
  Cela diffère de l’utilisation du [composant `<T>`](/docs/next/guides/t) pour traduire le contenu.
  Si vous souhaitez utiliser uniquement des composants `<T>` pour la traduction, ce document ne vous concerne pas.
</Callout>


## Référence

### Paramètres

<TypeTable
  type={{
  "id?": {
      type: 'string',
      optional: true,
      default: 'undefined',
  },
}}
/>

### Description

| Propriété | Description                                                                                                                        |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| `id`      | Préfixe facultatif ajouté devant toutes les clés de traduction. Utile pour travailler avec des valeurs de dictionnaire imbriquées. |

### Renvoie

Une fonction de traduction `d` qui, à partir d’un `id`, renvoie la version traduite de l’entrée correspondante

```jsx
(id: string, options?: DictionaryTranslationOptions) => string
```

| Nom        | Type                                                                                  | Description                                                               |
| ---------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------- |
| `id`       | `string`                                                                              | L’identifiant de l’entrée à traduire                                      |
| `options?` | [`DictionaryTranslationOptions`](/docs/next/api/types/dictionary-translation-options) | Options de traduction permettant de personnaliser le comportement de `d`. |

***

## Exemples

### Utilisation de base du dictionnaire

Chaque entrée de votre dictionnaire est traduite.

```jsx title="dictionary.jsx" copy
const dictionary = {
  greeting: "Hello, Bob", // [!code highlight]
};
export default dictionary;
```

Lorsque vous souhaitez accéder à ces entrées (côté client), appelez `useTranslations`.
Cette fonction renvoie une fonction qui prend en argument la clé d’une traduction du dictionnaire.

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

export default async function TranslateGreeting() {
  const t = useTranslations(); // [!code highlight]
  return (
    <p>
      {t('greeting')} // Bonjour, Alice // [!code highlight]
    </p>
  );
}
```


### Utiliser des variables [#variables]

Pour transmettre des valeurs, vous devez (1) attribuer un identifiant et (2) référencer cet identifiant lors de l’appel de la fonction `d`.

Dans cet exemple, nous utilisons `{}` pour transmettre des variables aux traductions.
Dans le dictionnaire, nous attribuons l’identifiant `{userName}`.

```jsx title="dictionary.jsx" copy
// [!code word:userName]
const dictionary = {
  greeting: "Hello, {userName}!", // [!code highlight]
};
export default dictionary;
```

```jsx title="src/server/TranslateGreeting.jsx" copy
// [!code word:userName]
import { useTranslations } from 'gt-next';

export default async function TranslateGreeting() {
  const t = useTranslations();
  
  // Bonjour Alice !
  const greetingAlice = t('greeting', { userName: "Alice" }); // [!code highlight]

  return (
    <p>
      {greetingAlice}
    </p>
  );
}
```


### Utilisation des préfixes

Vous pouvez utiliser des préfixes pour ne traduire qu’un sous-ensemble du dictionnaire.

```jsx title="dictionary.jsx" copy
const dictionary = {
  prefix1: { // [!code highlight]
    prefix2: { // [!code highlight]
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;
```

Comme nous avons ajouté la valeur `'prefix1.prefix2'` au Hook `useTranslations`, toutes les clés sont préfixées par `prefix1.prefix2` :

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

export default function UserDetails() {
  const t = useTranslations('prefix1.prefix2'); // [!code highlight]
  return (
    <div>
      <p>{t('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}
```

***


## Remarques

* La fonction `useTranslations` vous permet d&#39;accéder aux traductions du dictionnaire côté client.
* Le Hook `useTranslations` ne peut être utilisé qu&#39;au sein d&#39;un composant encapsulé dans un [`<GTProvider>`](/docs/next/api/components/gtprovider).

## Prochaines étapes

* Pour les traductions côté serveur, consultez [`getTranslations`](/docs/next/api/dictionary/get-translations).
* Pour en savoir plus sur l’utilisation des dictionnaires, consultez la [référence sur les dictionnaires](/docs/next/guides/dictionaries).