Vue d’ensemble

La fonction useGT est un hook qui traduit les chaînes au moment du build.

const t = useGT();

<p>{  t('Ce texte sera traduit')  }</p>;

Références

Paramètres

Aucun

Renvoie

Une fonction de rappel t qui traduit le contenu fourni.

(content: string, options?: InlineTranslationOptions) => string

Comportement

Production

Pendant le processus de CD (Continuous Delivery/Déploiement continu), tout contenu à l’intérieur d’une fonction t 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 de la compilation.

Une fois générées, les traductions sont soit (1) stockées dans le CDN (réseau de diffusion de contenu), soit (2) intégrées dans le résultat de compilation de votre application, selon votre configuration. À partir de là, le contenu traduit est diffusé à vos utilisateurs. Si une traduction est introuvable, un secours vers le contenu d’origine sera appliqué.

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

Développement

Pendant le développement, la fonction t 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 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 useGT pour traduire des chaînes.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Bonjour, Alice !')}
    </p>
  );
}

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

Utiliser des variables

Vous pouvez transmettre des variables aux traductions du dictionary.

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Bonjour, {name} !', { name: 'Alice'  })}
    </p>
  );
}

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

Utiliser le format de message ICU

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

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('Il y a {count, plural, =0 {aucun article} =1 {un article} other {{count} articles}} dans le panier', { count: 10 })}
    </p>
  );
}

Importation depuis gt-next/client

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

"use client";
import { useGT } from 'gt-next/client';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('Bonjour, Alice !')}
    </p>
  );
}

Notes

• La fonction useGT est un hook qui traduit des chaînes.
• Avec useGT, les chaînes sont traduites avant l’exécution, lors du processus de build (sauf en développement).

Prochaines étapes

• Consultez getGT pour les traductions de chaînes asynchrones lors du build.
• Pour les traductions à l’exécution, consultez tx et <Tx>.