Utiliser le composant « <T> »
Passons à la traduction !
Vue d’ensemble
Il est enfin temps de passer à la traduction !
Une fois vos composants <T> configurés, vous pouvez traduire votre application dans la langue de votre choix.
Concrètement, cela se résume à deux étapes :
Ajouter le composant <GTProvider>
Ajouter le composant <T>
Ajouter le composant <GTProvider>
Commençons par ajouter le composant <GTProvider> à votre application.
L’avantage, c’est que cela ne doit être fait qu’une seule fois.
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 chargé de transmettre les traductions du serveur au client.
Dès que nous souhaitons rendre un composant <T> côté client, nous devons l’entourer d’un <GTProvider>.
Pour en savoir plus sur le composant <GTProvider>, consultez cette page.
Ajouter le composant <T>
La partie que vous attendiez…
Il ne nous reste plus qu’à placer un <T> au début du contenu et un </T> de fermeture à la fin.
N’oubliez pas d’ajouter une chaîne d’identifiant unique pour servir d’id à la traduction.
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 la traduction de votre application !
Que pensez-vous de ce guide ?