Vue d’ensemble

La fonction msg sert à marquer et à encoder des chaînes en vue de leur traduction.

const encodedString = msg('Bonjour, monde !');

La chaîne encodée doit être transmise au hook useMessages ou à la fonction getMessages pour récupérer les traductions.

Décodage

Pour retrouver la chaîne originale, vous devez la décoder avec decodeMsg

import { msg, decodeMsg } from 'gt-next';
const encodedString = msg('Bonjour, monde !');
const decodedString = decodeMsg(encodedString);
console.log(decodedString); // "Bonjour, monde !"

Références

Paramètres

Renvoie

Une chaîne encodée, avec les variables interpolées (le cas échéant) remplacées par leurs valeurs.

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 (réseau de diffusion de contenu), soit (2) incluses dans la sortie de build de votre application, selon votre configuration. À partir de là, le contenu traduit est délivré à vos utilisateurs. Si une traduction n’est pas trouvée, un contenu de secours s’appliquera avec le texte d’origine.

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

Développement

Pendant le développement, la fonction msg traduira 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 délai lors des traductions à la demande en développement. Cela ne se produira pas lors des 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 msg pour signaler les chaînes à traduire.

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

const encodedString = msg('Bonjour, monde !');

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

Remarque : « Hello, world! » sera traduit dans la langue préférée de l’utilisateur.

Utiliser des variables

Vous pouvez passer des variables aux traductions du dictionary.

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

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

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

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

Remarque : « Alice » ne sera pas traduite dans la langue préférée de l’utilisateur, car il s’agit d’une variable.

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 encodedString = 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(encodedString)}
    </p>
  );
}

Remarques

• La fonction msg sert à marquer les chaînes à traduire.
• Les traductions via msg sont résolues avant l’exécution, lors du processus de build (sauf en environnement de développement).

Prochaines étapes

• Consultez useMessages pour traduire des chaînes.
• Consultez getMessages pour traduire des chaînes dans des composants asynchrones côté serveur.