概要

getGT 関数は、ビルド時に文字列を翻訳するための非同期関数です。

const t = await getGT();

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

リファレンス

パラメータ

なし

返り値

与えられたコンテンツを翻訳するコールバック関数 t を解決値とする Promise。

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

挙動

本番環境

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

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

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

開発

開発中は、t 関数がコンテンツをオンデマンドで翻訳します。 これは、アプリが各言語でどのように表示されるかをプロトタイピングするのに役立ちます。 この挙動を有効化するために、環境に Dev APIキー を追加することを忘れないでください。

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

例

基本的な使い方

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

import { getGT } from 'gt-next/server';

export default async function TranslateGreeting() {
  const t = await getGT();

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

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

variables の使用

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

import { getGT } from 'gt-next/server';

export default async function TranslateGreeting() {
  const t = await getGT();

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

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

ICU message format の使用

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

import { getGT } from 'gt-next/server';

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

注意事項

• getGT 関数は、文字列を翻訳するサーバーサイド関数です。
• getGT による翻訳は、実行時の前段階であるビルド時に行われます（開発時を除く）。

次のステップ

• ビルド時のクライアントサイドの文字列翻訳については、useGT を参照してください。
• 実行時の翻訳については、tx と <Tx> を参照してください。