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;以上です。これでアプリの翻訳を始める準備が整いました！
このガイドはいかがですか?