動的コンテンツの翻訳

概要

このガイドでは、Next.js サーバーコンポーネントで動的コンテンツを翻訳するために、<Tx> コンポーネント と tx() 関数の使い方を説明します。

このガイドを終える頃には、これらのコンポーネントや関数を正しく使うための構文を習得できます。

以下の内容を取り上げます：

動的コンテンツとは？

動的コンテンツとは、ビルド時に内容が決まっていないコンテンツのことです。

これには、変数やユーザー名、入力フィールドなどが含まれます。

例えば、次のようなものが動的コンテンツです：

const username = 'John Doe';
<p>Your username is {username}</p>

動的コンテンツはいつ翻訳すべきですか？

ほとんどの場合、Variable Components や Branching Components を使って動的コンテンツに対応できます。

これらのコンポーネントは <T> コンポーネントとともに動的コンテンツを扱うために設計されており、可能な限りこれらを使用することを推奨します。

しかし、動的コンテンツをオンデマンドで翻訳する必要がある場合もあります。

たとえば、ユーザーが作成したチャットメッセージを別の言語で表示したい場合、gt-next を使ってオンデマンドで翻訳することができます。

<Tx> コンポーネントの使い方

import { Tx } from 'gt-next';

const message = 'Hello, world!';
<Tx>{message}</Tx>

翻訳したい JSX コンテンツを <Tx> コンポーネントでラップするだけです。

<Tx> コンポーネントは、その内容をオンデマンドで翻訳し、非同期で翻訳済みのコンテンツをレンダリングします。

詳細は API リファレンス をご覧ください。

tx() 関数の使い方

tx() 関数は、文字列を動的に翻訳するために使用できるサーバーサイド関数です。

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

const message = 'Hello, world!';
const translatedMessage = await tx(message);

tx() 関数は、翻訳された文字列を解決する Promise を返します。

詳細については、API リファレンス を参照してください。

例

動的コンテンツのレンダリング

import { Tx } from 'gt-next';

export default function ChatMessage({ message }: { message: ReactNode }) {
  return (
    <Tx>{message}</Tx>
  );
}

文字列の翻訳

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

export default async function ChatMessage({ message }: { message: string }) {
  const translatedMessage = await tx(message);
  return (
    <div>{translatedMessage}</div>
  );
}

本番環境での考慮事項

<Tx>コンポーネントとtx()関数の動作は、開発環境でも本番環境でも同じです。

どの種類のAPIキーを使用しても、動作は変わりません。 どちらの場合も、翻訳はライブでオンデマンドに完了します。

よくある落とし穴

不要な <Tx> および tx() の使用

<Tx> コンポーネントや tx() 関数を使用する場合は、本当に T変数コンポーネント や 分岐コンポーネント を <T> コンポーネントと一緒に使えない場合のみにしてください。

必要のないときに <Tx> や tx() を使うと、リソースの無駄遣いになり、APIのクォータをすぐに使い切ってしまいます。

さらに、翻訳がオンデマンドで行われるため、コンテンツの表示速度も遅くなります。