Vue d’ensemble

La fonction useMessages est un hook qui traduit des encoded string provenant de msg au moment de la compilation.

const m = useMessages();

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

Référence

Paramètres

Aucun

Retourne

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

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

Comportement

Production

Pendant le processus de CD (Continuous Delivery/Déploiement continu), tout contenu à l’intérieur d’une fonction msg est traduit avant le déploiement de votre application. Cela garantit des temps de chargement rapides pour toutes les locales, mais ne peut 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 (Content Delivery Network), soit (2) incluses dans le build de votre application, selon votre configuration. À partir de là, le contenu traduit est diffusé à vos utilisateurs. Si une traduction est introuvable, un secours affiche le contenu original.

Assurez-vous de suivre le guide de déploiement ici.

Développement

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

Vous constaterez un léger délai lors des traductions à la demande en développement. Cela ne se produira pas dans les builds de production, sauf si le contenu est explicitement traduit à la demande, c.-à-d. en utilisant tx ou <Tx>.

Exemple

Utilisation de base

Vous pouvez utiliser useMessages pour Traduire des encoded string depuis msg.

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

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

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

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

Remarque : « Alice » sera traduit dans la langue préférée de l’utilisateur.

Utilisation de variables

Vous pouvez transmettre des variables à des chaînes encodées.

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

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

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

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })} {/* Ceci affichera « Bonjour Bob ! » */}
    </p>
  );
}

Les variables msg ont priorité sur les variables m

Lorsque vous passez des variables à la fois à msg et à m, les variables passées à msg ont priorité sur celles passées à m.

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

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

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

Remarque : cela affichera "Hello, Alice!". La variable n’est pas surchargée au moment du rendu.

Utilisation du format de message ICU

gt-next prend en charge le format de message ICU, ce qui vous permet également de formater vos variables.

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

const encodedMessage = msg('Il y a {count, plural, =0 {aucun article} =1 {un article} other {{count} articles}} dans le panier', { count: 10 });

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

Importation depuis gt-next/client

Si vous travaillez sous la directive "use client", importez depuis gt-next/client plutôt que depuis gt-next.

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('Bonjour Alice !');

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

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

Notes

• La fonction useMessages est un hook qui traduit des encoded string depuis msg.
• Les traductions avec useMessages ont lieu avant l’exécution, lors du processus de build (sauf en développement).

Prochaines étapes

• Consultez getMessages pour les traductions asynchrones de chaînes à partir d’encoded string lors du build.
• Consultez msg pour encoder des chaînes en vue de leur traduction.
• Pour les traductions à l’exécution, consultez tx et <Tx>.