# gt-next: General Translation Next.js SDK: 文字列の翻訳
URL: https://generaltranslation.com/ja/docs/next/tutorials/translating-strings.mdx
---
title: 文字列の翻訳
description: 文字列を翻訳する方法
---

## 概要

このガイドでは、[`useGT`](/docs/next/api/strings/use-gt)、[`getGT`](/docs/next/api/strings/get-gt)、および [`tx`](/docs/next/api/strings/tx) を使って Next.js アプリ内の文字列を翻訳する方法を、ステップごとに解説します。

## 前提条件

このセクションでは、プロジェクトに `gt-next` がすでにインストールされており、[クイックスタートガイド](/docs/next) に沿って設定を進めていることを前提としています。

## 文字列を翻訳する

### クライアント側コンポーネント

クライアント側の文字列には、[`useGT`](/docs/next/api/strings/use-gt) を使用してください。
`useGT` は、[`<GTProvider>`](/docs/next/api/components/gtprovider) の子コンポーネント内で呼び出す必要があることに注意してください。

```jsx title="src/components/MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

### サーバーサイドコンポーネント

サーバーサイドで扱う文字列には、[`getGT`](/docs/next/api/strings/get-gt) を使用します。

```jsx title="src/pages/index.jsx" copy
import { getGT } from 'gt-next/server';

export default async function Home() {
  const gt = await getGT(); // [!code highlight]
  return (
    <div>
      <h1>{gt('This is a string that gets translated')}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **注記:**
  開発環境で runtime にコンテンツを翻訳している場合、[`getGT`](/docs/next/api/strings/get-gt) で取得した文字列の翻訳版を確認するには、ページを再読み込みする必要があります。
  **これは本番環境では発生しません。**
</Callout>

### 変数の追加

変数は、値が変わる可能性はありますが、翻訳の対象にはなりません。
文字列に変数を追加するには、次のパターンを使用します。

```jsx title="MyComponent.jsx" copy
import { useGT } from 'gt-next';

export default function MyComponent() {
  const gt = useGT();
  return (
    <div>
      <h1>{gt('Hello there, {username}', { variables: { username: 'Brian123' }})}</h1> // [!code highlight]
    </div>
  );
}
```

これは、[`useGT`](/docs/next/api/strings/use-gt) と [`getGT`](/docs/next/api/strings/get-gt) の両方で使用できます。


### 動的コンテンツ

内容が変化する文字列があるとします。
[`tx`](/docs/next/api/strings/tx) 関数を使うと、その文字列を runtime で翻訳できます。

```jsx title="MyComponent.jsx" copy
import { tx } from 'gt-next/server';

export default async function MyComponent({ username }) {
  const translation = await tx(`Hello, ${username}. How is your day?`); // [!code highlight]
  return (
    <div>
      <h1>{translation}</h1> // [!code highlight]
    </div>
  );
}
```

<Callout>
  **注:**
  [`tx`](/docs/next/api/strings/tx) 関数はサーバーサイドでのみ利用でき、必要な場合にのみ使用してください。
  runtime 翻訳では、処理の遅延が発生しやすくなります。
  可能な限り、デプロイ前に翻訳するために [`getGT`](/docs/next/api/strings/get-gt) または [`useGT`](/docs/next/api/strings/use-gt) を使用してください。
</Callout>

***


## 注意事項

* 文字列を翻訳するには、[`useGT`](/docs/next/api/strings/use-gt)、[`getGT`](/docs/next/api/strings/get-gt)、および [`tx`](/docs/next/api/strings/tx) を使用します。
* `useGT` と `getGT` はデプロイ前に翻訳されますが、`tx` は runtime で翻訳されます。`tx` の使用は必要最小限にしてください。
* 変数は、`{ variables: { key: value } }` パターンを使って文字列に追加できます。

## 次のステップ

* [クイックスタートガイド](/docs/next)に戻り、プロジェクトの翻訳設定を完了してください。
* [`useGT`](/docs/next/api/strings/use-gt)、[`getGT`](/docs/next/api/strings/get-gt)、[`tx`](/docs/next/api/strings/tx) の API リファレンスも参照してください。