useGT()

Aperçu

La fonction useGT() est un hook côté client pour traduire des chaînes de caractères au moment de la construction.

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

Référence

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, tout contenu à l'intérieur d'une fonction t() sera traduit avant que votre application ne soit déployée. Cela garantit des temps de chargement rapides pour toutes les locales, mais cela ne peut traduire que le contenu connu au moment de la construction.

Une fois générées, les traductions sont soit (1) stockées dans le CDN, soit (2) stockées dans le résultat de la construction de votre application, selon votre configuration. À partir de là, le contenu traduit est servi à vos utilisateurs. Si une traduction n'est pas trouvée, elle reviendra au contenu original.

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é API de développement à votre environnement pour activer ce comportement.

Vous verrez un délai lors de la traduction à la demande en développement. Cela ne se produira pas lors des constructions de production à moins que le contenu ne soit explicitement traduit à la demande, c'est-à-dire en utilisant tx() ou <Tx>.

Exemple

Utilisation de base

Vous pouvez utiliser useGT() pour traduire des chaînes de caractères.

"use client";
import { useGT } from 'gt-next/client';
 
export default function TranslateGreeting() {
  const t = useGT();
 
  return (
    <p>
      {t('Hello, Alice!')}
    </p>
  );
}

Remarque : "Alice" sera traduit dans la langue préférée de l'utilisateur.

Utilisation des variables

Vous pouvez passer des variables aux traductions du dictionnaire.

"use client";
import { useGT } from 'gt-next/client';
 
export default function TranslateGreeting() {
  const t = useGT();
 
  return (
    <p>
      {t('Hello, {name}!', { variables: { name: 'Alice' } })}
    </p>
  );
}

Remarque : "Alice" ne sera pas traduit dans la langue préférée de l'utilisateur car c'est une variable.

Notes

• La fonction useGT() est un hook côté client qui traduit les chaînes de caractères.
• Les chaînes de traduction avec useGT() se produisent avant l'exécution, pendant le processus de construction (sauf en développement).

Prochaines étapes

• Voir getGT() pour les traductions de chaînes côté serveur au moment de la construction.
• Pour les traductions à l'exécution, voir tx() et <Tx>.
• Voir InlineTranslationOptions pour plus d'informations sur la personnalisation des traductions.