概要

useGT 関数は、ビルド時に文字列を翻訳するためのフックです。

const t = useGT();

<p>{  t('このテキストは翻訳されます')  }</p>;

リファレンス

パラメータ

なし

戻り値

渡されたコンテンツを翻訳するコールバック関数 t。

(content: string, options?: InlineTranslationOptions) => string

挙動

本番運用

CDプロセス（継続的デリバリー／継続的デプロイ）中は、t 関数内のコンテンツがアプリケーションのデプロイ前に翻訳されます。 これによりすべての対応ロケールで高速な読み込みが実現しますが、翻訳できるのはビルド時点で確定しているコンテンツに限られます。

生成された翻訳は、設定に応じて (1) CDN に保存されるか、(2) アプリのビルド出力に同梱されます。 以降、その翻訳済みコンテンツがユーザーに配信されます。 翻訳が見つからない場合は、元のコンテンツがフォールバックとして使用されます。

必ずこちらのデプロイガイドに従ってください。

開発

開発中は、t 関数がコンテンツをオンデマンドで翻訳します。 これは、アプリが各言語でどのように見えるかを試作する際に役立ちます。 この動作を有効にするには、環境に Dev APIキー を追加することを忘れないでください。

開発環境でのオンデマンド翻訳では遅延が発生します。 これは、本番ビルドでは（コンテンツを明示的にオンデマンドで翻訳しない限り）発生しません。 つまり、tx または <Tx> を使用している場合です。

例

基本的な使い方

useGT を使って文字列を翻訳できます。

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('こんにちは、アリス！')}
    </p>
  );
}

注: "Alice" はユーザーの優先言語に翻訳されます。

variables の使用

dictionary の翻訳に variables を渡せます。

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('こんにちは、{name}さん！', { name: 'Alice'  })}
    </p>
  );
}

Note: 「Alice」は Variable であるため、ユーザーの希望言語には翻訳されません。

ICU message format の使用

gt-next は ICU message format をサポートしており、variables の値もフォーマットできます。

import { useGT } from 'gt-next';

export default function TranslateGreeting() {
  const t = useGT();
  return (
    <p>
      {t('カート内{count, plural, =0 {に商品はありません} =1 {に商品が1個あります} other {には商品が{count}個あります}}', { count: 10 })}
    </p>
  );
}

gt-next/client からのインポート

"use client" ディレクティブ環境で動作する場合は、gt-next ではなく gt-next/client からインポートしてください。

"use client";
import { useGT } from 'gt-next/client';

export default function TranslateGreeting() {
  const t = useGT();

  return (
    <p>
      {t('こんにちは、アリス！')}
    </p>
  );
}

注意事項

• useGT 関数は、文字列を翻訳するためのフックです。
• useGT による翻訳は、（開発環境を除き）実行時より前のビルドプロセスで行われます。

次のステップ

• ビルド時に非同期で文字列を翻訳するには、getGT を参照してください。
• 実行時の翻訳については、tx と <Tx> を参照してください。