Utilisation du composant <T>

Aperçu

Il est enfin temps de faire un peu de traduction ! Une fois que vous avez configuré vos composants <T>, vous pouvez traduire votre application dans n'importe quelle langue que vous souhaitez !

En réalité, cela se décompose en deux étapes :

Ajouter le composant <GTProvider>

Ajouter le composant <T>

Ajouter le composant `<GTProvider>`

Commençons par ajouter le composant <GTProvider> à votre application. La bonne nouvelle est que cela ne doit être fait qu'une seule fois.

src/app/layout.tsx

import { GTProvider } from 'gt-next'
...
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <body
        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
      >
        <GTProvider> // [!code highlight]
            {children}
        </GTProvider> // [!code highlight]
      </body>
    </html>
  );
}

Pourquoi avons-nous besoin du composant <GTProvider> ?

Le <GTProvider> est responsable de transmettre les traductions du serveur au client. Chaque fois que nous voulons rendre un composant <T> côté client, nous devons l'envelopper dans un <GTProvider>.

Vous pouvez en savoir plus sur le composant <GTProvider> ici.

Ajouter le composant `<T>`

La partie que vous attendiez...

Maintenant, tout ce que nous avons à faire est de placer un <T> en haut du contenu et un </T> à la fin. N'oubliez pas d'ajouter une chaîne d'identification unique pour servir d'identifiant pour la traduction.

src/app/page.tsx

import { T } from 'gt-next'
...
function Page() {
  ...
 
  return (
    <T id="currency-converter"> // [!code highlight]
      ...
    </T> 
  );
}
 
export default Page;

Et voilà ! Vous êtes maintenant prêt à commencer à traduire votre application !

Utilisation du composant <T>

Aperçu

Ajouter le composant <GTProvider>

Ajouter le composant <T>

Sur cette page

Ajouter le composant `<GTProvider>`

Ajouter le composant `<T>`