getTranslations()

概要

getTranslations() は、サーバーサイドコンポーネント向けに翻訳用辞書から文字列の翻訳を取得するために使用します。

const d = await getTranslations(); // 翻訳関数を取得
d('greeting.hello'); // 翻訳を取得するために id を渡す

getTranslations() は次の機能をサポートします:

文字列および JSX コンテンツの翻訳
翻訳内での変数挿入と条件分岐
任意の id のプレフィックス付与

クライアントサイドでの翻訳については、useTranslations() を参照してください。

getTranslations() と useTranslations() は、翻訳対象のすべてのコンテンツを保存するために辞書を使用します。これは、翻訳に <T> コンポーネントを使用する方法とは異なります。もし翻訳に <T> コンポーネントのみを使用したい場合は、このドキュメントは対象外です。

リファレンス

Props

Prop	Type	Default
`id??`	`string`	`undefined`

説明

Prop	説明
`id`	すべての翻訳キーに前置するオプションのプレフィックス。ネストされた辞書値を扱う際に便利です。

戻り値

idが与えられると、対応するエントリの翻訳版を返す翻訳関数d()のプロミス

Promise<(id: string, options?: DictionaryTranslationOptions) => React.ReactNode>

名前	型	説明
`id`	`string`	翻訳されるエントリのid
`options?`	`DictionaryTranslationOptions`	`d()`の動作をカスタマイズする翻訳オプション。

例

辞書の基本的な使い方

辞書内のすべてのエントリが翻訳されます。

dictionary.jsx

const dictionary = {
  greeting: <>Hello, Alice!</>, 
};
export default dictionary;

これらのエントリにアクセスしたい場合（サーバー側）には、getTranslations() を呼び出します。この関数は、辞書内の翻訳キーを受け取る関数を返します。

TranslateGreeting.jsx

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

export default async function TranslateGreeting() {
  
  const d = await getTranslations(); 

  return (
    <p>
      {d('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}

変数の使用

値を渡すには、(1) 識別子を割り当て、(2) d() 関数を呼び出す際にその識別子を参照します。

この例では、{} を使って翻訳に変数を渡します。辞書では、識別子 {userName} を割り当てています。

dictionary.jsx

const dictionary = {
  greeting: "Hello, {userName}!", 
};
export default dictionary;

TranslateGreeting.jsx

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

export default async function TranslateGreeting() {
  const d = await getTranslations();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 

  return (
    <p>
      {greetingAlice}
    </p>
  );
}

プレフィックスの使用

プレフィックスを使って、辞書の一部だけを取得できます。

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "Hello, Bob",
    }
  }
};
export default dictionary;

getTranslations メソッドに 'prefix1.prefix2' を渡したため、すべてのキーは prefix1.prefix2 が先頭に付きます:

UserDetails.jsx

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

export default function UserDetails() {
  const d = await getTranslations('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

Notes

getTranslations()関数を使用すると、サーバーサイドで辞書の翻訳にアクセスできます。

次のステップ

getTranslations()のクライアントサイド版であるuseTranslations()を参照してください。
辞書リファレンスで辞書の使用について詳しく学んでください。

getTranslations()

このページについて