useMessages()

概要

useMessages() 関数は、ビルド時に msg() のエンコード済み文字列を翻訳するためのフックです。

const m = useMessages();

<p>{  m(encodedString)  }</p>;

ビルド時の翻訳: useMessages() による翻訳は、アプリをデプロイする前のビルド時に実行されます。 msg() からのエンコード済み文字列を渡すと、ユーザーの優先言語に翻訳されます。

リファレンス

パラメータ

なし

戻り値

msg()から提供されたエンコード済みコンテンツを翻訳するコールバック関数m()。

(encodedContent: string, options?: Record<string, any>) => string

名前	型	説明
`encodedContent`	`string`	翻訳対象となる`msg()`からのエンコード済み文字列コンテンツ。
`options?`	`Record<string, any>`	エンコード済み文字列内の変数を上書きするためのオプションパラメータ。

挙動

本番環境

CD プロセス中に、msg() 関数内のコンテンツはアプリケーションのデプロイ前に翻訳されます。これにより、すべてのロケールで高速な読み込みが可能になりますが、ビルド時点で既知のコンテンツのみ翻訳できます。

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

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

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

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

変数の使用

エンコードされた文字列内の変数を上書きできます。

import { msg, useMessages } from 'gt-next';

const encodedGreeting = msg('Hello, {name}!', { name: 'Alice' });

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting, { name: 'Bob' })}
    </p>
  );
}

注意: 表示は "Hello, Bob!" になります。変数はレンダー時に上書きされます。

ICU メッセージ形式の使用

gt-next は ICU メッセージ形式をサポートしており、変数の書式設定も行えます。

import { msg, useMessages } from 'gt-next';

const encodedMessage = msg('There are {count, plural, =0 {no items} =1 {one item} other {{count} items}} in the cart', { count: 10 });

export default function TranslateGreeting() {
  const m = useMessages();
  return (
    <p>
      {m(encodedMessage)}
    </p>
  );
}

ICU メッセージ形式は、変数を柔軟かつ強力に整形する方法です。詳細は、ICU メッセージ形式のドキュメントを参照してください。

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

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

"use client";
import { msg, useMessages } from 'gt-next/client';

const encodedGreeting = msg('Hello, Alice!');

export default function TranslateGreeting() {
  const m = useMessages();

  return (
    <p>
      {m(encodedGreeting)}
    </p>
  );
}

注意

useMessages() 関数は、msg() のエンコード済み文字列を翻訳するためのフックです。
useMessages() による翻訳は、実行時ではなくビルド時に行われます（開発時を除く）。

次のステップ

ビルド時にエンコードされた文字列から非同期に翻訳を取得する方法は、getMessages() を参照してください。
翻訳用に文字列をエンコードする方法は、msg() を参照してください。
実行時の翻訳については、tx() および <Tx> を参照してください。
翻訳のカスタマイズについての詳細は、InlineTranslationOptions を参照してください。