Currency Converter
<T> コンポーネントの使い方
さあ、翻訳を始めましょう！
概要
いよいよ翻訳の出番です！
<T> コンポーネントをセットアップすれば、アプリを好きな言語に翻訳できます。
実際には、次の2つの手順に分けられます。
<GTProvider> コンポーネントを追加する
<T> コンポーネントを追加する
<GTProvider> コンポーネントを追加する
まずはアプリに <GTProvider> コンポーネントを追加しましょう。
良い点は、これを行うのは一度だけで済むことです。
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>
);
}なぜ <GTProvider> コンポーネントが必要なのですか？
<GTProvider> は、サーバーからクライアントへ翻訳を受け渡す役割を担います。
クライアント側で <T> コンポーネントをレンダーする場合は、必ず <GTProvider> でラップする必要があります。
<GTProvider> コンポーネントの詳細はこちらをご覧ください。
<T> コンポーネントを追加する
お待たせしました。
あとはコンテンツの先頭に <T> を、末尾に閉じタグ </T> を置くだけです。
翻訳用の id として機能する一意の識別子文字列も忘れずに追加してください。
import { T } from 'gt-next'
...
function Page() {
...
return (
<T id="currency-converter"> // [!code highlight]
...
</T>
);
}
export default Page;以上です！これでアプリの翻訳を始める準備が整いました！
このガイドはどうでしたか？