Utiliser le composant « <T> »
Traduisons quelque chose !
Vue d’ensemble
C’est enfin le moment de traduire !
Une fois vos composants <T> configurés, vous pouvez traduire votre application dans n’importe quelle langue.
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 a-t-on besoin du composant <GTProvider> ?
Le <GTProvider> a pour rôle de transmettre les traductions du serveur au client.
Dès que nous voulons rendre un composant <T> côté client, nous devons l’envelopper dans 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> en haut du contenu et une balise de fermeture </T> à la fin.
N’oubliez pas d’ajouter une chaîne d’identifiant unique qui servira d’id pour la traduction.
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;Et voilà ! Vous êtes prêt à commencer à traduire votre application.
Comment trouvez-vous ce guide ?