# gt-next: General Translation Next.js SDK: Using the Component URL: https://generaltranslation.com/en-US/docs/next/tutorials/examples/currency-converter/t.mdx --- title: Using the Component description: Let's do some translation! --- ## Overview It's finally time to do some translating! Once you set up your `` components, you can translate your app into any language you want! Really this breaks down into two steps: Adding the `` component Adding the `` component ## Add the `` Component Let's start by adding the `` component to your app. The nice thing is that this only has to be done once. ```jsx title="src/app/layout.tsx" copy import { GTProvider } from 'gt-next' // [!code highlight] ... export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( // [!code highlight] {children} // [!code highlight] ); } ``` **Why do we need the `` component?** The `` is responsible for passing translations from the server to the client. Any time we want to render a `` component on the client side, we need to wrap it in a ``. You can read more about the `` component [here](/docs/next/api/components/gtprovider). ## Add the `` Component The part you have been waiting for... Now all we have to do is put a `` at the top of the content and a closing `` at the end. Don't forget to add a unique identifier string to act as the id for the translation. ```jsx title="src/app/page.tsx" copy import { T } from 'gt-next' // [!code highlight] ... function Page() { ... return ( // [!code highlight] ... // [!code highlight] ); } export default Page; ``` And that's it! You're now ready to start translating your app!