Aperçu

Ce guide est un tutoriel étape par étape qui explique comment traduire des chaînes dans votre application Next.js à l’aide de useGT, getGT et tx.

Prérequis

Nous partons du principe que vous avez déjà installé gt-next dans votre projet et que vous avez suivi, ou suivez actuellement, le Guide de démarrage rapide.

Traduire des chaînes

Composants côté client

Pour toutes les chaînes côté client, utilisez useGT. N’oubliez pas que useGT doit être appelé au sein d’un composant enfant de <GTProvider>.

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT(); 
  return (
    <div>
      <h1>{t('Ceci est une chaîne qui sera traduite')}</h1> // [!code highlight]
    </div>
  );
}

Composants côté serveur

Pour toutes les chaînes côté serveur, utilisez getGT.

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

export default async function Home() {
  const t = await getGT(); 
  return (
    <div>
      <h1>{t('Ceci est une chaîne qui sera traduite')}</h1> // [!code highlight]
    </div>
  );
}

Ajout de variables

Les variables sont des valeurs susceptibles de changer, mais elles ne sont pas traduites. Pour ajouter des variables à vos chaînes, utilisez le modèle suivant :

import { useGT } from 'gt-next';

export default function MyComponent() {
  const t = useGT();
  return (
    <div>
      <h1>{t('Bonjour {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}

Ceci fonctionne avec useGT et getGT.

Contenu dynamique

Supposons que vous ayez une chaîne qui varie. Vous pouvez utiliser la fonction tx pour traduire la chaîne au moment de l’exécution.

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

export default async function MyComponent({ username }) {
  const translation = await tx(`Bonjour, ${username}. Comment se passe votre journée ?`); 
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}

Remarques

• Pour traduire des chaînes, utilisez useGT, getGT et tx.
• useGT et getGT effectuent la traduction avant le déploiement, tandis que tx traduit au moment de l’exécution. Utilisez tx avec parcimonie.
• Vous pouvez ajouter des variables aux chaînes à l’aide du motif { variables: { key: value } }.

Prochaines étapes

• Revenez au Guide de démarrage rapide pour terminer la configuration de votre projet pour la traduction.
• Consultez la Référence de l’API pour useGT, getGT et tx.