GitHub

動的コンテンツの翻訳は、ビルド時には存在しないテキスト（ユーザー生成コンテンツ、APIレスポンス、データベースレコードなど）を扱います。JSXコンテンツには<Tx>、プレーン文字列にはtxを使用します。いずれもセキュリティ上の理由からサーバーサイド専用です。

必要最小限に: 動的翻訳はAPIクォータを消費し、レイテンシを増加させます。可能な限り、<T>コンポーネントと変数コンポーネントを優先してください。

動的翻訳を使うタイミング

動的翻訳は、ビルド時点では本当に確定できないコンテンツに対して使用します。

適用に適したユースケース

ユーザー生成コンテンツ: チャットメッセージ、レビュー、ソーシャル投稿
外部 API のレスポンス: サードパーティのデータ、RSS フィード、外部サービス
データベースのレコード: 動的な CMS コンテンツ、API 由来のユーザープロフィール
リアルタイムデータ: ライブ通知、ステータスメッセージ

次のケースでは避けてください

ユーザー名やアカウント番号 → <Var> を使用
条件分岐があるメッセージ → branch components を使用
フォームのバリデーション → string translation を使用
静的な設定値 → shared strings を使用

クイックスタートガイド

JSX コンテンツと `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

`tx` を使うプレーン文字列

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

サーバーサイド専用

<Tx> と tx は、セキュリティ上の理由からサーバーサイド専用です。

// ✅ サーバーコンポーネント
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ クライアントコンポーネント - 動作しません
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // エラー!
  return <div>{translated}</div>;
}

例

ユーザー投稿コンテンツ

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

外部APIデータ

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

混合コンテンツ

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* 変数を含む静的コンテンツ */}
      <T>
        <p><Var>{review.author}</Var> がこの商品を <Var>{review.rating}</Var> つ星で評価しました</p>
      </T>
      
      {/* 動的ユーザーコンテンツ */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

よくある問題

過度な使用を避ける

標準コンポーネントで対応できるコンテンツには、動的翻訳を使わないでください。

// ❌ 不要
const content = `こんにちは、${userName}！`;
return <Tx>{content}</Tx>;

// ✅ 代わりにvariableコンポーネントを使用
return (
  <T>
    <p>こんにちは、<Var>{userName}</Var>！</p>
  </T>
);

APIクォータへの影響

動的翻訳はリクエストごとにAPIクォータを消費します。本番環境のアプリケーションではキャッシュとエラーハンドリングを実装してください。

次のステップ

ローカル翻訳ガイド - API呼び出しなしで翻訳を扱う
ミドルウェアガイド - 言語検出とルーティング
APIリファレンス:
- <Tx> コンポーネント

動的翻訳を使うタイミング

動的翻訳は、ビルド時点では本当に確定できないコンテンツに対して使用します。

適用に適したユースケース

ユーザー生成コンテンツ: チャットメッセージ、レビュー、ソーシャル投稿
外部 API のレスポンス: サードパーティのデータ、RSS フィード、外部サービス
データベースのレコード: 動的な CMS コンテンツ、API 由来のユーザープロフィール
リアルタイムデータ: ライブ通知、ステータスメッセージ

次のケースでは避けてください

ユーザー名やアカウント番号 → <Var> を使用
条件分岐があるメッセージ → branch components を使用
フォームのバリデーション → string translation を使用
静的な設定値 → shared strings を使用

クイックスタートガイド

JSX コンテンツと `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

`tx` を使うプレーン文字列

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

サーバーサイド専用

<Tx> と tx は、セキュリティ上の理由からサーバーサイド専用です。

// ✅ サーバーコンポーネント
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ クライアントコンポーネント - 動作しません
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // エラー!
  return <div>{translated}</div>;
}

例

ユーザー投稿コンテンツ

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

外部APIデータ

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

混合コンテンツ

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* 変数を含む静的コンテンツ */}
      <T>
        <p><Var>{review.author}</Var> がこの商品を <Var>{review.rating}</Var> つ星で評価しました</p>
      </T>
      
      {/* 動的ユーザーコンテンツ */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

よくある問題

過度な使用を避ける

標準コンポーネントで対応できるコンテンツには、動的翻訳を使わないでください。

// ❌ 不要
const content = `こんにちは、${userName}！`;
return <Tx>{content}</Tx>;

// ✅ 代わりにvariableコンポーネントを使用
return (
  <T>
    <p>こんにちは、<Var>{userName}</Var>！</p>
  </T>
);

APIクォータへの影響

動的翻訳はリクエストごとにAPIクォータを消費します。本番環境のアプリケーションではキャッシュとエラーハンドリングを実装してください。

次のステップ

ローカル翻訳ガイド - API呼び出しなしで翻訳を扱う
ミドルウェアガイド - 言語検出とルーティング
APIリファレンス:
- <Tx> コンポーネント

動的翻訳を使うタイミング

動的翻訳は、ビルド時点では本当に確定できないコンテンツに対して使用します。

適用に適したユースケース

ユーザー生成コンテンツ: チャットメッセージ、レビュー、ソーシャル投稿
外部 API のレスポンス: サードパーティのデータ、RSS フィード、外部サービス
データベースのレコード: 動的な CMS コンテンツ、API 由来のユーザープロフィール
リアルタイムデータ: ライブ通知、ステータスメッセージ

次のケースでは避けてください

ユーザー名やアカウント番号 → <Var> を使用
条件分岐があるメッセージ → branch components を使用
フォームのバリデーション → string translation を使用
静的な設定値 → shared strings を使用

クイックスタートガイド

JSX コンテンツと `<Tx>`

import { Tx } from 'gt-next';

async function UserPost({ postContent }) {
  return (
    <article>
      <Tx>{postContent}</Tx>
    </article>
  );
}

`tx` を使うプレーン文字列

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

async function NotificationBanner({ message }) {
  const translatedMessage = await tx(message);
  
  return (
    <div className="banner">
      {translatedMessage}
    </div>
  );
}

サーバーサイド専用

<Tx> と tx は、セキュリティ上の理由からサーバーサイド専用です。

// ✅ サーバーコンポーネント
async function ServerComponent() {
  const translated = await tx(dynamicContent);
  return <div>{translated}</div>;
}

// ❌ クライアントコンポーネント - 動作しません
'use client';
function ClientComponent() {
  const translated = await tx(dynamicContent); // エラー!
  return <div>{translated}</div>;
}

例

ユーザー投稿コンテンツ

import { Tx } from 'gt-next';

async function ChatMessage({ message }) {
  return (
    <div className="chat-message">
      <div className="author">{message.author}</div>
      <Tx>{message.content}</Tx>
    </div>
  );
}

外部APIデータ

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

async function NewsArticle({ article }) {
  const translatedTitle = await tx(article.title);
  
  return (
    <article>
      <h1>{translatedTitle}</h1>
      <p>{article.publishedAt}</p>
    </article>
  );
}

混合コンテンツ

import { T, Tx, Var } from 'gt-next';

async function ProductReview({ review }) {
  return (
    <div>
      {/* 変数を含む静的コンテンツ */}
      <T>
        <p><Var>{review.author}</Var> がこの商品を <Var>{review.rating}</Var> つ星で評価しました</p>
      </T>
      
      {/* 動的ユーザーコンテンツ */}
      <Tx>{review.content}</Tx>
    </div>
  );
}

よくある問題

過度な使用を避ける

標準コンポーネントで対応できるコンテンツには、動的翻訳を使わないでください。

// ❌ 不要
const content = `こんにちは、${userName}！`;
return <Tx>{content}</Tx>;

// ✅ 代わりにvariableコンポーネントを使用
return (
  <T>
    <p>こんにちは、<Var>{userName}</Var>！</p>
  </T>
);

APIクォータへの影響

動的翻訳はリクエストごとにAPIクォータを消費します。本番環境のアプリケーションではキャッシュとエラーハンドリングを実装してください。

次のステップ

ローカル翻訳ガイド - API呼び出しなしで翻訳を扱う
ミドルウェアガイド - 言語検出とルーティング
APIリファレンス:
- <Tx> コンポーネント

動的コンテンツ

このページについて

動的コンテンツ

このページについて

動的コンテンツ

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする