Using the <T> Component

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.

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>
  );
}

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.

src/app/page.tsx

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!

Using the <T> Component

Overview

Add the <GTProvider> Component

Add the <T> Component

On this page

Add the `<GTProvider>` Component

Add the `<T>` Component