動的コンテンツ

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

必要最小限に使用: 動的翻訳はAPIクォータを消費し、レイテンシを増加させます。可能な限り、variable components を用いた <T> components を優先してください。

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

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

適切なユースケース

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

次のケースでは使用しないでください

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

クイックスタート

`<Tx>` を用いた JSX コンテンツ

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 = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ 代わりに変数コンポーネントを使う
return (
  <T>
    <p>Hello, <Var>{userName}</Var>!</p>
  </T>
);

API クォータへの影響

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

次のステップ

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

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

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

適切なユースケース

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

次のケースでは使用しないでください

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

クイックスタート

`<Tx>` を用いた JSX コンテンツ

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 = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ 代わりに変数コンポーネントを使う
return (
  <T>
    <p>Hello, <Var>{userName}</Var>!</p>
  </T>
);

API クォータへの影響

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

次のステップ

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

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

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

適切なユースケース

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

次のケースでは使用しないでください

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

クイックスタート

`<Tx>` を用いた JSX コンテンツ

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 = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;

// ✅ 代わりに変数コンポーネントを使う
return (
  <T>
    <p>Hello, <Var>{userName}</Var>!</p>
  </T>
);

API クォータへの影響

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

次のステップ

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

動的コンテンツ

このページについて

動的コンテンツ

このページについて

動的コンテンツ

このページについて

GitHubGitHubでスターを付ける

GitHubGitHubでスターを付ける

GitHubでスターを付ける

GitHubでスターを付ける