Traduire du contenu dynamique

Aperçu

Ce guide vous expliquera comment utiliser le composant <Tx> et la fonction tx() pour traduire du contenu dynamique dans les composants serveur Next.js.

À la fin de ce guide, vous connaîtrez la syntaxe appropriée pour utiliser ces composants et fonctions.

Nous aborderons les points suivants :

Qu'est-ce que le contenu dynamique ?

Le contenu dynamique est un contenu qui n'est pas connu au moment de la génération.

Cela peut inclure des éléments comme des variables, des noms d'utilisateur, des champs de saisie, etc.

Par exemple, ce qui suit est un contenu dynamique :

const username = 'John Doe';
<p>Your username is {username}</p>

Quand faut-il traduire du contenu dynamique ?

Dans la plupart des cas, vous pouvez utiliser les Variable Components ou les Branching Components pour gérer le contenu dynamique.

Ces composants sont conçus pour gérer le contenu dynamique avec le composant <T>, et nous recommandons donc de les utiliser autant que possible.

Cependant, il existe certains cas où vous devez traduire du contenu dynamique à la demande.

Par exemple, si vous avez un message de chat créé par un utilisateur et que vous souhaitez l'afficher dans une autre langue, vous pouvez utiliser gt-next pour le traduire à la demande.

Comment utiliser le composant <Tx>

import { Tx } from 'gt-next';

const message = 'Hello, world!';
<Tx>{message}</Tx>

Il suffit d'entourer le contenu JSX que vous souhaitez traduire avec le composant <Tx>.

Le composant <Tx> traduira alors le contenu à la demande et affichera le contenu traduit de manière asynchrone.

Consultez la référence de l'API pour plus d'informations.

Comment utiliser la fonction tx()

La fonction tx() est une fonction côté serveur qui peut être utilisée pour traduire des chaînes de caractères de manière dynamique.

import { tx } from 'gt-next/server';

const message = 'Hello, world!';
const translatedMessage = await tx(message);

La fonction tx() retourne une promesse qui se résout en la chaîne traduite.

Consultez la référence de l'API pour plus d'informations.

Exemples

Rendu de contenu dynamique

import { Tx } from 'gt-next';

export default function ChatMessage({ message }: { message: ReactNode }) {
  return (
    <Tx>{message}</Tx>
  );
}

Traduction d'une chaîne

import { tx } from 'gt-next/server';

export default async function ChatMessage({ message }: { message: string }) {
  const translatedMessage = await tx(message);
  return (
    <div>{translatedMessage}</div>
  );
}

Considérations de production

Le comportement du composant <Tx> et de la fonction tx() est identique en développement et en production.

Quel que soit le type de clé API que vous utilisez, le comportement reste le même. Dans les deux cas, les traductions sont effectuées en direct, à la demande.

Pièges courants

Utilisation inutile de <Tx> et tx()

Si vous utilisez le composant <Tx> ou la fonction tx(), vous ne devriez le faire que si vous ne pouvez vraiment pas utiliser les Composants de variables ou les Composants conditionnels avec le composant <T>.

Utiliser <Tx> et tx() lorsque ce n'est pas nécessaire est un gaspillage de ressources et épuisera rapidement votre quota d'API.

De plus, votre contenu sera rendu plus lentement, car les traductions sont effectuées à la demande.