Vue d’ensemble

La fonction getMessages est une fonction asynchrone qui traduit des encoded strings provenant de msg lors de la phase de build.

const m = await getMessages();

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

Référence

Paramètres

Aucun

Valeur de retour

Une promesse résolue avec une fonction de rappel, m, qui traduit le contenu encodé fourni dans msg.

Promise<(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 cela ne peut traduire que le contenu connu au moment du build.

Une fois générées, les traductions sont (1) stockées dans le CDN (réseau de diffusion de contenu) ou (2) incluses dans la sortie de build de votre application, selon votre configuration. À partir de là, le contenu traduit est distribué à vos utilisateurs. Si une traduction est introuvable, un secours vers le contenu original sera appliqué.

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

Développement

Pendant le 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 observerez un délai lors de la traduction à la demande en développement. Cela ne se produit 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 getMessages pour Traduire des encoded string depuis msg.

import { msg, getMessages } from 'gt-next/server';

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

export default async function TranslateGreeting() {
  const m = await getMessages();

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

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

Utilisation des variables

Vous pouvez injecter des variables dans des chaînes encodées.

import { msg, getMessages } from 'gt-next/server';

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

export default async function TranslateGreeting() {
  const m = await getMessages();

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

Les variables msg priment sur les variables m

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

import { msg, getMessages } from 'gt-next/server';

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

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

Remarque : ceci affichera "Hello, Alice!" : la variable n’est pas écrasé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, getMessages } from 'gt-next/server';

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

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

Notes

• La fonction getMessages est une fonction côté serveur qui traduit des chaînes encodées à partir de msg.
• Les traductions de chaînes avec getMessages ont lieu avant l’exécution, lors du processus de build (sauf en développement).

Prochaines étapes

• Consultez useMessages pour traduire côté client des chaînes encodées au moment du build.
• Consultez msg pour encoder des chaînes en vue de leur traduction.
• Pour les traductions à l’exécution, consultez tx et <Tx>.