Utilisation du composant <T>
Traduisons un peu !
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 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.
Chaque fois que nous voulons afficher un composant <T> côté client, nous devons l'entourer d'un <GTProvider>.
Vous pouvez en savoir plus sur le composant <GTProvider> ici.
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 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 à traduire votre application !
Comment trouvez-vous ce guide ?