# gt-next: General Translation Next.js SDK: 動的コンテンツ
URL: https://generaltranslation.com/ja/docs/next/guides/dynamic-content.mdx
---
title: 動的コンテンツ
description: サーバーサイドの翻訳APIを使用してruntimeコンテンツを翻訳する方法
---

動的コンテンツの翻訳では、ビルド時には利用できないテキスト (ユーザー生成コンテンツ、APIレスポンス、データベースレコードなど) を扱います。JSXコンテンツには [`<Tx>`](/docs/next/api/components/tx) を、プレーンな文字列には [`tx`](/docs/next/api/strings/tx) を使用してください。どちらもセキュリティ上の理由から、サーバーサイドでのみ使用できます。

<Callout type="warn">
  **必要な場合にのみ使用してください:** 動的翻訳はAPIクォータを消費し、レイテンシも増加させます。可能な限り、[`<T>` コンポーネント](/docs/next/guides/t) と [変数コンポーネント](/docs/next/guides/variables) を優先してください。
</Callout>

## 動的翻訳を使うべきケース

動的翻訳は、ビルド時点では把握できないコンテンツに使用します:

### 適切なユースケース

* **ユーザー生成コンテンツ**: チャットメッセージ、レビュー、SNS投稿
* **外部 API のレスポンス**: サードパーティのデータ、RSS フィード、外部サービス
* **データベース内のレコード**: 動的な CMS コンテンツ、API から取得したユーザープロフィール
* **リアルタイムデータ**: リアルタイム通知、ステータスメッセージ

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

* ユーザー名、口座番号 → [`<Var>`](/docs/next/api/components/var) を使用
* 条件付きメッセージ → [branch コンポーネント](/docs/next/guides/branches) を使用
* フォームの入力検証 → [文字列の翻訳](/docs/next/guides/strings) を使用
* 静的な設定 → [共有文字列](/docs/next/guides/shared-strings) を使用

## クイックスタート

### Tx を使った JSX コンテンツ

```jsx
import { Tx } from 'gt-next';

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


### tx を使ったプレーンな文字列

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

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

## サーバーサイド専用

セキュリティ上の理由から、[`<Tx>`](/docs/next/api/components/tx) と [`tx`](/docs/next/api/strings/tx) はどちらもサーバーサイドでのみ使用できます：

```jsx
// ✅ サーバーコンポーネント
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>;
}
```


## 例

### ユーザー生成コンテンツ

```jsx
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 データ

```jsx
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>
  );
}
```


### 混在コンテンツ

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

async function ProductReview({ review }) {
  return (
    <div>
      {/* 変数を含む静的コンテンツ */}
      <T>
        <p><Var>{review.author}</Var> rated this <Var>{review.rating}</Var> stars</p>
      </T>
      
      {/* 動的なユーザーコンテンツ */}
      <Tx>{review.content}</Tx>
    </div>
  );
}
```


## API ルートでの使用

[`tx`](/docs/next/api/strings/tx) は、サーバーコンポーネントだけでなく、Next.js の API ルートハンドラーでも使用できます。

```tsx
// app/api/translate/route.ts
import { tx } from 'gt-next/server';
import { NextRequest, NextResponse } from 'next/server';

export async function POST(request: NextRequest) {
  const { text, locale } = await request.json();
  const translated = await tx(text, { locale });
  return NextResponse.json({ translated });
}
```

これは、翻訳機能を API エンドポイントとして公開する必要がある場合に便利です。たとえば、クライアントコンポーネントや外部サービスに提供するケースです。


## クライアントサイドでの翻訳パターン

[`tx`](/docs/next/api/strings/tx) はサーバー専用のため、クライアントコンポーネントでは API ルートをプロキシとして呼び出すことで、動的コンテンツを翻訳できます。

```tsx
'use client';

async function translateText(text: string) {
  const res = await fetch('/api/translate', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ text, locale: 'fr' }),
  });
  const { translated } = await res.json();
  return translated;
}
```

これは[上記のAPIルート](#api-route-usage)と組み合わせて使用することで、クライアントコンポーネントから動的翻訳を利用できるようにします。


## 複数の項目の翻訳

コンテンツの配列を並列に翻訳するには、`Promise.all` を使用します。

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

const translatedPosts = await Promise.all(
  posts.map(async (post) => ({
    ...post,
    title: await tx(post.title),
  }))
);
```

これは、データベースレコードの一覧や API レスポンスなど、動的な文字列のコレクションを翻訳する際に便利です。


## よくある問題

### 使いすぎを避ける

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

```jsx
// ❌ 不要
const content = `Hello, ${userName}!`;
return <Tx>{content}</Tx>;

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


### API クォータへの影響

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

## 次のステップ

<Callout>
  **実際の動作を見る:** `tx()` と `<Tx>` の動作するデモは、[動的コンテンツのサンプルアプリ](https://github.com/gt-examples/dynamic-content-tx)で確認できます — [ライブプレビュー](https://dynamic-content-tx.generaltranslation.dev)。
</Callout>

* [ローカル翻訳ガイド](/docs/next/guides/local-tx) - API 呼び出しを行わずに翻訳を処理
* [ミドルウェアガイド](/docs/next/guides/middleware) - 言語検出とルーティング
* API リファレンス:
  * [`<Tx>` コンポーネント](/docs/next/api/components/tx)