useDict()

概要

useDict() は、クライアントサイドのコンポーネント用に翻訳辞書から文字列の翻訳を取得するために使用されます。これは、<GTProvider>でラップされたコンポーネント内で使用する必要があります。

const d = useDict(); // 翻訳関数を取得
d('greeting.hello'); // idを渡して翻訳を取得

サーバーサイドの翻訳については、getDict()を参照してください。

getDict() と useDict() は、翻訳のためにすべてのコンテンツを保存する辞書を使用します。これは、翻訳のために<T> コンポーネントを使用するのとは異なります。 <T> コンポーネントのみを使用して翻訳を行いたい場合、このドキュメントは該当しません。

リファレンス

パラメーター

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

説明

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

戻り値

d() という翻訳関数で、id を指定すると、対応するエントリの翻訳版を返します

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

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

例

基本的な使用法

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

dictionary.jsx

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

これらのエントリにアクセスしたいときは（クライアント側で）、useDict()を呼び出します。これは、辞書から翻訳のキーを受け取る関数を返します。

TranslateGreeting.jsx

"use client";
import { useDict } from 'gt-next/client';
 
export default async function TranslateGreeting() {
  const d = useDict(); 
  return (
    <p>
      {d('greeting')} // Hello, Alice // [!code highlight]
    </p>
  );
}

変数の使用

値を渡すためには、(1)識別子を割り当て、(2)d()関数を呼び出すときに識別子を参照する必要があります。

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

dictionary.jsx

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

src/server/TranslateGreeting.jsx

"use client";
import { useDict } from 'gt-next/client';
 
export default async function TranslateGreeting() {
  const d = useDict();
  
  // Hello Alice!
  const greetingAlice = d('greeting', { userName: "Alice" }); 
 
  return (
    <p>
      {greetingAlice}
    </p>
  );
}

プレフィックスの使用

プレフィックスを使用して、辞書のサブセットのみを翻訳できます。

dictionary.jsx

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

useDictフックに値'prefix1.prefix2'を追加したため、すべてのキーはprefix1.prefix2でプレフィックスされます：

UserDetails.jsx

"use client";
import { useDict } from 'gt-next/client';
 
export default function UserDetails() {
  const d = useDict('prefix1.prefix2'); 
  return (
    <div>
      <p>{d('greeting')}</p> // greeting => prefix1.prefix2.greeting // [!code highlight]
    </div>
  );
}

メモ

useDict() 関数は、クライアント側で辞書の翻訳にアクセスすることを可能にします。
useDict() フックは、<GTProvider> コンポーネントでラップされたコンポーネント内でのみ使用できます。

次のステップ

サーバーサイドの翻訳については、getDict()を参照してください。
辞書の使用方法については、辞書リファレンスを参照してください。
翻訳オプションの詳細については、DictionaryTranslationOptionsを参照してください。

useDict()

このページについて