Using the <T> Component
Let's do some translation!
Overview
It's finally time to do some translating!
Once you set up your <T> components, you can translate your app into any language you want!
Really this breaks down into two steps:
Adding the <GTProvider> component
Adding the <T> component
Add the <GTProvider> Component
Let's start by adding the <GTProvider> component to your app.
The nice thing is that this only has to be done once.
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>
);
}Why do we need the <GTProvider> component?
The <GTProvider> is responsible for passing translations from the server to the client.
Any time we want to render a <T> component on the client side, we need to wrap it in a <GTProvider>.
You can read more about the <GTProvider> component here.
Add the <T> Component
The part you have been waiting for...
Now all we have to do is put a <T> at the top of the content and a closing </T> at the end.
Don't forget to add a unique identifier string to act as the id for the translation.
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;And that's it! You're now ready to start translating your app!
How is this guide?