<T>コンポーネントの使い方

概要

いよいよ翻訳の時間です！ <T> コンポーネントをセットアップすれば、アプリを好きな言語に翻訳できます。

実際には、これは2つのステップに分かれます：

<GTProvider> コンポーネントを追加する

<T> コンポーネントを追加する

`<GTProvider>` コンポーネントを追加する

まずは、アプリに <GTProvider> コンポーネントを追加しましょう。嬉しいことに、これは一度だけ行えば十分です。

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

なぜ <GTProvider> コンポーネントが必要なのですか？

<GTProvider> は、サーバーからクライアントへ翻訳を渡す役割を担っています。クライアントサイドで <T> コンポーネントをレンダリングしたい場合は、必ず <GTProvider> でラップする必要があります。

<GTProvider> コンポーネントについての詳細はこちらをご覧ください。

`<T>` コンポーネントを追加する

お待たせしました...

あとは、コンテンツの先頭に <T> を、最後に </T> を追加するだけです。翻訳用の id として機能する一意の識別子文字列を忘れずに追加してください。

src/app/page.tsx

import { T } from 'gt-next'
...
function Page() {
  ...

  return (
    <T id="currency-converter"> // [!code highlight]
      ...
    </T> 
  );
}

export default Page;

これで完了です！これでアプリの翻訳を始める準備ができました！

<T>コンポーネントの使い方

概要

<GTProvider> コンポーネントを追加する

<T> コンポーネントを追加する

このページについて

`<GTProvider>` コンポーネントを追加する

`<T>` コンポーネントを追加する