# gt-next: General Translation Next.js SDK: コンポーネントの使い方 URL: https://generaltranslation.com/ja/docs/next/tutorials/examples/currency-converter/t.mdx --- title: コンポーネントの使い方 description: 翻訳してみましょう！ --- ## 概要いよいよ翻訳を始めましょう！ `` コンポーネントを設定したら、アプリを任意の言語に翻訳できます。手順は次の 2 つです。 `` コンポーネントの追加 `` コンポーネントの追加 ## `` コンポーネントを追加するまずは、アプリに `` コンポーネントを追加しましょう。これは一度追加すれば十分です。 ```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] ); } ``` **なぜ `` コンポーネントが必要なのでしょうか？** `` は、翻訳をサーバーからクライアントへ受け渡す役割を担います。クライアント側で `` コンポーネントをレンダリングする場合は、必ず `` でラップする必要があります。 `` コンポーネントの詳細は、[こちら](/docs/next/api/components/gtprovider)を参照してください。 ## `` コンポーネントを追加するお待ちかねの部分です... あとは、コンテンツの先頭に `` を置き、末尾に `` を追加するだけです。翻訳の id として使う一意の識別子文字列を追加するのを忘れないでください。 ```jsx title="src/app/page.tsx" copy import { T } from 'gt-next' // [!code highlight] ... function Page() { ... return ( // [!code highlight] ... // [!code highlight] ); } export default Page; ``` これで完了です！これでアプリの翻訳を始められます！