# gt-next: General Translation Next.js SDK: useMessages
URL: https://generaltranslation.com/fr/docs/next/api/strings/use-messages.mdx
---
title: useMessages
description: Référence de l’API pour la fonction useMessages() de traduction de chaînes de caractères
---

{/* GÉNÉRÉ AUTOMATIQUEMENT : ne modifiez pas ce fichier directement. Modifiez plutôt le template dans content/docs-templates/. */}


## Vue d’ensemble

La fonction `useMessages` est un Hook qui permet de traduire, lors du build, les chaînes de caractères encodées provenant de `msg`.

```jsx
const m = useMessages();

<p>{m(encodedString)}</p>;
```

<Callout>
  **Traduction au build :** `useMessages` effectue les traductions au build,
  avant le déploiement de votre application. Vous pouvez lui passer des chaînes encodées par `msg`, et elles seront
  traduites dans la langue préférée de l’utilisateur.
</Callout>

## Référence

### Paramètres

Aucun

### Renvoie

Une fonction de rappel, `m`, qui traduit le contenu encodé fourni par `msg`.

```jsx
(encodedContent: string, options?: Record<string, any>) => string
```

| Nom              | Type                  | Description                                                                                       |
| ---------------- | --------------------- | ------------------------------------------------------------------------------------------------- |
| `encodedContent` | `string`              | Le contenu encodé de la chaîne de caractères issu de `msg`, à traduire.                           |
| `options?`       | `Record<string, any>` | Paramètres facultatifs permettant de transmettre des variables à la chaîne de caractères encodée. |

***


## Fonctionnement

### Production

Pendant le processus de CD, tout contenu placé dans une fonction `msg` est traduit avant le déploiement de votre application.
Cela garantit des temps de chargement rapides pour tous les paramètres régionaux, mais ne permet de traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont soit (1) stockées dans le CDN, soit (2) incluses dans la sortie de build de votre application, selon votre configuration.
Elles sont ensuite servies à vos utilisateurs.
Si aucune traduction n&#39;est trouvée, le contenu d&#39;origine est utilisé par défaut.

Veillez à suivre le [guide de déploiement ici](/docs/next/tutorials/quickdeploy).

### Développement

Pendant le développement, la fonction `m` traduit le contenu en mode on-demand.
C’est utile pour prototyper l’apparence de votre application dans différentes langues.
N’oubliez pas d’ajouter une clé API de développement à votre environnement pour activer ce comportement.

En développement, la traduction on-demand entraîne un délai.
Ce délai n’apparaîtra pas dans les builds de production, sauf si le contenu est explicitement traduit on-demand.

***

## Exemple

### Utilisation de base

Vous pouvez utiliser `useMessages` pour traduire les chaînes de caractères encodées par `msg`.

```jsx copy
import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

Remarque : &quot;Alice&quot; sera traduit dans la langue préférée de l’utilisateur.


### Utilisation de variables [#variables]

Vous pouvez passer des variables à des chaînes de caractères encodées.

```jsx copy
import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Hello, {name}!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}{' '}
      {/* Ceci affichera "Hello, Bob!" */}
    </p>
  );
}
```


### Les variables `msg` remplacent celles de `m`

Lorsque vous passez des variables à la fois à `msg` et à `m`, celles passées à `msg` remplacent celles passées à `m`.

```jsx copy
import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedGreeting, { name: 'Bob' })}</p>;
}
```

Remarque : cela affichera &quot;Hello, Alice!&quot; - la variable n’est pas remplacée lors du rendu.


### Utilisation du format de message ICU

`gt-next` prend en charge le format de message ICU, qui vous permet aussi de formater vos variables.

```jsx copy
import { msg, useMessages } from 'gt-next';

const encodedMessage = msg(
  'There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart',
  { count: 10 }
);

export default function TranslateGreeting() {
  const m = useMessages();
  return <p>{m(encodedMessage)}</p>;
}
```

<Callout>
  Le format des messages ICU est un moyen puissant de mettre en forme vos variables. Pour en savoir plus,
  consultez la [documentation sur le format des messages
  ICU](https://unicode-org.github.io/icu/userguide/format_parse/messages/).
</Callout>


### Import depuis `gt-next`

Si vous utilisez la directive `"use client"`, vous devez importer depuis `gt-next` plutôt que depuis `gt-next`.

```jsx copy
'use client';
import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return <p>{m(encodedGreeting)}</p>;
}
```

***


## Remarques

* La fonction `useMessages` est un Hook qui traduit les chaînes de caractères encodées issues de `msg`.
* La traduction des chaînes de caractères via `useMessages` s’effectue avant l’exécution, lors du processus de build (sauf en développement).

## Étapes suivantes

* Voir [`msg`](/docs/next/api/strings/msg) pour encoder des chaînes de caractères en vue de leur traduction.