# General Translation Knowledge Base: Comment traduire des chaînes en dehors du JSX ?
URL: https://generaltranslation.com/fr/kb/translate-strings-outside-jsx.mdx
Docs index: https://generaltranslation.com/llms.txt
Description: Faites passer chaque chaîne qui n’est pas un enfant JSX, comme un espace réservé ou une constante définie au niveau du module, par une fonction de traduction à l’endroit où elle est affichée. Le hook useGT de General Translation renvoie cette fonction, et msg, combiné à useMessages, traduit les constantes définies en dehors d’un composant.
Category: Internationalisation
Last updated: 2026-10-21
Authors: Kevin Liu, Kevin Wu
Published: 2026-10-21

Les chaînes en dehors du JSX désignent du texte qui n’est pas un enfant JSX et qu’un composant de traduction ne peut donc pas encapsuler : les valeurs d’attributs comme `placeholder` et `aria-label`, les chaînes construites dans le code et les constantes définies au niveau du module. Chacune doit passer par une fonction de traduction fournie par un hook (`useTranslation` dans `react-i18next`, par exemple), or les hooks ne s’exécutent qu’à l’intérieur d’un composant. Une constante définie au niveau du module n’est évaluée qu’une seule fois, au chargement du fichier : la traduire à cet endroit fige donc la langue active à ce moment-là (sur un serveur, une seule et même langue pour tous les utilisateurs). La constante contient donc plutôt une référence, et la chaîne est traduite là où elle est affichée.

## Video

The video is narrated in English, with English captions.

[How do I translate strings outside JSX?](https://caxecubb9c64cezv.public.blob.vercel-storage.com/films/kb-translate-strings-outside-jsx.mp4) (49 s)

General Translation translates placeholders with `useGT` and constants with `msg` and `useMessages`. Call `useGT` and pass the placeholder to the function it returns, await `getGT` in async components, register each constant string with `msg` and resolve it with `useMessages`, then run `npx gt translate`.

## Façons de traduire des chaînes en dehors du JSX

| Approche                                                                         | Points forts                                                                                                                                       | Dans le code                                                                                                                                                                                                                                                                                                         | Ce qui reste à votre charge                                                                                                                                                     |
| -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [`i18next`](/kb/general-translation-vs-i18next) (`react-i18next`) ou `next-intl` | Des environnements d’exécution matures dotés d’une fonction de traduction pour n’importe quelle chaîne                                             | [`t`](https://www.i18next.com/overview/api#t), issue de [`useTranslation`](https://react.i18next.com/latest/usetranslation-hook) ou de [`useTranslations`](https://next-intl.dev/docs/environments/server-client-components), prend une clé ; une constante stocke la clé, qui est traduite au moment de l’affichage | Inventer une clé pour chaque chaîne, écrire un fichier par langue et maintenir tous les fichiers synchronisés à mesure que le texte évolue                                      |
| [`react-intl`](/kb/general-translation-vs-react-intl)                            | Les descripteurs de messages contiennent un ID, un message par défaut et une description pour les traducteurs                                      | `defineMessages` déclare les descripteurs dans une constante, et [`formatMessage`](https://formatjs.github.io/docs/react-intl/api#formatmessage), issue de [`useIntl`](https://formatjs.github.io/docs/react-intl/api#useintl-hook), traduit chacun d’eux au moment de l’affichage                                   | Un ID pour chaque message, l’extraction des messages dans un fichier par langue et la production de toutes les traductions                                                      |
| [Lingui](/kb/general-translation-vs-lingui)                                      | Le texte source fait office de message : aucune clé à inventer                                                                                     | La macro [`msg`](https://lingui.dev/ref/macro#definemessage) définit un message dans une constante, et `_`, issue de [`useLingui`](https://lingui.dev/ref/react), le traduit au moment de l’affichage                                                                                                                | Exécuter `lingui extract` et `lingui compile`, puis traduire chaque catalogue                                                                                                   |
| General Translation (`gt-react` et `gt-next`)                                    | [`npx gt translate`](/docs/cli/reference/commands/translate) repère chaque chaîne dans votre code et la traduit avant la compilation de production | [`useGT`](/docs/react/reference/hooks/use-gt) renvoie une fonction que vous appelez avec la chaîne source (sans clé) ; [`msg`](/docs/react/reference/functions/msg) enregistre chaque chaîne dans une constante, et [`useMessages`](/docs/react/reference/hooks/use-messages) la traduit au moment de l’affichage    | Passer chaque chaîne sous forme de littéral pour que la CLI puisse la repérer, et relancer [`npx gt translate`](/docs/cli/reference/commands/translate) lorsque le texte change |

Utilisez `i18next` ou `next-intl` si votre application dispose déjà de fichiers de clés qu’un traducteur tient à jour. Utilisez `react-intl` ou Lingui si les traducteurs travaillent à partir de catalogues extraits et ont besoin d’une description ou du texte source pour chaque message. Utilisez General Translation si vos chaînes sont réparties entre composants et constantes partagées, et évoluent à chaque livraison. Si une constante n’est utilisée que par un seul composant, il suffit de la déplacer à l’intérieur de celui-ci : chaque valeur devient alors un appel de traduction ordinaire.

## Traduire des chaînes en dehors du JSX avec General Translation

Avec `gt-react` et `gt-next` de General Translation, on traduit une chaîne de caractères dans un composant à l'aide du hook [`useGT`](/docs/react/reference/hooks/use-gt), et une constante à l'aide de [`msg`](/docs/react/reference/functions/msg) et [`useMessages`](/docs/react/reference/hooks/use-messages).

1. Pour une chaîne de caractères dans un composant, appelez `const gt = useGT()`, qui renvoie directement la fonction de traduction, puis passez-lui une chaîne littérale dont les variables sont exprimées sous forme de paramètres fictifs nommés : `gt('Welcome back, {name}!', { name: user.name })`. Ajoutez `$context` pour lever l'ambiguïté d'un mot à double sens.

2. Pour une constante, enregistrez chaque chaîne avec [`msg`](/docs/react/reference/functions/msg), puis résolvez-la avec [`useMessages`](/docs/react/reference/hooks/use-messages) à l'endroit où elle est affichée :

   ```tsx
   import { msg, useMessages } from 'gt-react';

   const STATUS = { active: msg('Active'), paused: msg('Paused') };

   function Badge({ status }: { status: 'active' | 'paused' }) {
     const m = useMessages();
     return <span>{m(STATUS[status])}</span>;
   }
   ```

3. Exécutez [`npx gt translate`](/docs/cli/reference/commands/translate) avant la compilation de production.

## Composants serveur et niveau du module

Les composants asynchrones de l&#39;App Router de Next.js ne pouvant pas appeler de hooks, ils récupèrent [`getGT`](/docs/react/nextjs/reference/functions/get-gt) et [`getMessages`](/docs/react/nextjs/reference/functions/get-messages) depuis `gt-next/server` avec `await`. Dans une application `gt-react` côté client configurée avec [`initializeGTSPA`](/docs/react/reference/config#initialize-spa), la fonction [`t`](/docs/react/reference/functions/t-function) traduit également au niveau du module, mais tout changement de langue nécessite un rechargement complet de la page. Le guide [Traduction de chaînes](/docs/react/guides/translating-strings) détaille la marche à suivre pour chaque framework.

## Related questions

- [Comment traduire du texte conditionnel en JSX ?](https://generaltranslation.com/fr/kb/translate-conditional-jsx.mdx): Gardez la phrase entière et traduisez chacune de ses versions, car un ternaire la découpe en fragments qui perdent leur sens et leur place dans l’ordre des mots propre à chaque langue. General Translation y parvient avec `<Branch>` à l’intérieur de `<T>`, qui traduit la phrase d’un seul tenant.
- [Comment formater les nombres, les dates et les devises pour chaque paramètre régional ?](https://generaltranslation.com/fr/kb/format-numbers-dates-currencies.mdx): Formatez chaque valeur au moment de l’affichage de la page, avec le paramètre régional du lecteur et l’API Intl de JavaScript, et laissez-la en dehors de la phrase traduite. Les composants `<Num>`, `<Currency>`, `<DateTime>` et `<RelativeTime>` de General Translation font les deux à l’intérieur d’un `<T>` : une seule traduction suffit ainsi pour toutes les valeurs.
- [Comment traduire une application React ?](https://generaltranslation.com/fr/kb/translate-react-app.mdx): Traduire une application React consiste à internationaliser ses composants pour qu’ils s’affichent dans la langue de l’utilisateur, puis à traduire chaque chaîne de caractères dans chacune des langues prises en charge. gt-react de General Translation traduit le JSX sur place dans le composant `<T>`, et npx gt translate génère un fichier par langue.
- [Peut-on faire de l’i18n sans fichiers de traduction ?](https://generaltranslation.com/fr/kb/i18n-without-translation-files.mdx): Oui. Les bibliothèques gt-react et gt-next de General Translation permettent d’internationaliser React et Next.js sans clés de traduction ni fichier JSON par langue à maintenir. Le texte reste intégré au JSX, dans le composant `<T>`, et la commande gt translate génère les traductions de chaque langue lors de la compilation, en s’appuyant sur le contexte de votre code. Locadex peut les tenir à jour via des pull requests.

## Previous and next questions

- Previous question: [Comment relire et modifier les traductions ?](https://generaltranslation.com/fr/kb/review-translations.mdx)
- Next question: [Comment traduire du contenu dans Sanity ?](https://generaltranslation.com/fr/kb/translate-sanity-content.mdx)

## Sitemap

See the [Knowledge Base sitemap](https://generaltranslation.com/fr/kb/sitemap.md) for every article.