getTranslations

概要

getTranslations は、サーバーサイドコンポーネントで translation dictionary から文字列の翻訳を取得するために使用します。

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

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

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

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

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

リファレンス

Props

Prop

Type

説明

Prop	説明
`id`	すべての翻訳キーの先頭に付与する任意のプレフィックス。ネストされたdictionaryのvalueを扱う際に便利です。

戻り値

id を受け取り、対応する Entry の翻訳を返す翻訳関数 d を解決する Promise

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

名称	Type	説明
`id`	`string`	翻訳対象のEntryのid
`options?`	`DictionaryTranslationOptions`	`d` の動作をカスタマイズするための翻訳options。

例

dictionary の基本的な使い方

dictionary 内のすべての Entry が翻訳されます。

dictionary.jsx

const dictionary = {
  greeting: <>こんにちは、アリス！</>, 
};
export default dictionary;

サーバー側でこれらのエントリにアクセスする場合は、getTranslations を呼び出します。すると、dictionary 内の翻訳キーを受け取る関数が返されます。

TranslateGreeting.jsx

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

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

  return (
    <p>
      {d('greeting')} // こんにちは、Aliceさん // [!code highlight]
    </p>
  );
}

変数の使用

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

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

dictionary.jsx

const dictionary = {
  greeting: "こんにちは、{userName}！", 
};
export default dictionary;

TranslateGreeting.jsx

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

export default async function TranslateGreeting() {
  const d = await getTranslations();
  
  // アリスさん、こんにちは！
  const greetingAlice = d('greeting', { userName: "Alice" }); 

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

プレフィックスの使用

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

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "こんにちは、ボブ",
    }
  }
};
export default dictionary;

getTranslations メソッドに value として '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>
  );
}

注意

getTranslations 関数を使うと、サーバー側で dictionary の翻訳にアクセスできます。

次のステップ

クライアントサイド版の getTranslations に相当する機能については、useTranslations を参照してください。

概要

getTranslations は、サーバーサイドコンポーネントで translation dictionary から文字列の翻訳を取得するために使用します。

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

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

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

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

リファレンス

Props

Prop

Type

説明

Prop	説明
`id`	すべての翻訳キーの先頭に付与する任意のプレフィックス。ネストされたdictionaryのvalueを扱う際に便利です。

戻り値

id を受け取り、対応する Entry の翻訳を返す翻訳関数 d を解決する Promise

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

名称	Type	説明
`id`	`string`	翻訳対象のEntryのid
`options?`	`DictionaryTranslationOptions`	`d` の動作をカスタマイズするための翻訳options。

例

dictionary の基本的な使い方

dictionary 内のすべての Entry が翻訳されます。

dictionary.jsx

const dictionary = {
  greeting: <>こんにちは、アリス！</>, 
};
export default dictionary;

サーバー側でこれらのエントリにアクセスする場合は、getTranslations を呼び出します。すると、dictionary 内の翻訳キーを受け取る関数が返されます。

TranslateGreeting.jsx

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

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

  return (
    <p>
      {d('greeting')} // こんにちは、Aliceさん // [!code highlight]
    </p>
  );
}

変数の使用

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

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

dictionary.jsx

const dictionary = {
  greeting: "こんにちは、{userName}！", 
};
export default dictionary;

TranslateGreeting.jsx

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

export default async function TranslateGreeting() {
  const d = await getTranslations();
  
  // アリスさん、こんにちは！
  const greetingAlice = d('greeting', { userName: "Alice" }); 

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

プレフィックスの使用

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

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "こんにちは、ボブ",
    }
  }
};
export default dictionary;

getTranslations メソッドに value として '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>
  );
}

注意

getTranslations 関数を使うと、サーバー側で dictionary の翻訳にアクセスできます。

次のステップ

クライアントサイド版の getTranslations に相当する機能については、useTranslations を参照してください。

概要

getTranslations は、サーバーサイドコンポーネントで translation dictionary から文字列の翻訳を取得するために使用します。

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

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

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

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

Prop	説明
`id`	すべての翻訳キーの先頭に付与する任意のプレフィックス。ネストされたdictionaryのvalueを扱う際に便利です。

戻り値

id を受け取り、対応する Entry の翻訳を返す翻訳関数 d を解決する Promise

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

名称	Type	説明
`id`	`string`	翻訳対象のEntryのid
`options?`	`DictionaryTranslationOptions`	`d` の動作をカスタマイズするための翻訳options。

例

dictionary の基本的な使い方

dictionary 内のすべての Entry が翻訳されます。

dictionary.jsx

const dictionary = {
  greeting: <>こんにちは、アリス！</>, 
};
export default dictionary;

サーバー側でこれらのエントリにアクセスする場合は、getTranslations を呼び出します。すると、dictionary 内の翻訳キーを受け取る関数が返されます。

TranslateGreeting.jsx

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

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

  return (
    <p>
      {d('greeting')} // こんにちは、Aliceさん // [!code highlight]
    </p>
  );
}

変数の使用

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

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

dictionary.jsx

const dictionary = {
  greeting: "こんにちは、{userName}！", 
};
export default dictionary;

TranslateGreeting.jsx

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

export default async function TranslateGreeting() {
  const d = await getTranslations();
  
  // アリスさん、こんにちは！
  const greetingAlice = d('greeting', { userName: "Alice" }); 

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

プレフィックスの使用

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

dictionary.jsx

const dictionary = {
  prefix1: { 
    prefix2: { 
      greeting: "こんにちは、ボブ",
    }
  }
};
export default dictionary;

getTranslations メソッドに value として '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>
  );
}

注意

getTranslations 関数を使うと、サーバー側で dictionary の翻訳にアクセスできます。

次のステップ

クライアントサイド版の getTranslations に相当する機能については、useTranslations を参照してください。

getTranslations

このページについて

getTranslations

このページについて

getTranslations

このページについて

GitHubGitHubでスターを付ける

GitHubGitHubでスターを付ける

GitHubでスターを付ける

GitHubでスターを付ける