GitHub

前提条件: Next.js App Router、基本的な JavaScript の知識

インストール

gt-next と gtx-cli パッケージをインストールします。

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

クイックセットアップ: 自動設定には npx gtx-cli@latest をお試しください。詳しくはセットアップウィザードガイドまたは AI ツール連携をご覧ください。

構成

`withGTConfig`

withGTConfig 関数は、Next.js アプリケーションで SDK を初期化します。next.config.[js|ts] ファイルに追加してください。

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // 既存のNext.js設定
};

export default withGTConfig(nextConfig. {
  // 追加のGT設定オプション
});

`GTProvider`

GTProvider コンポーネントは、クライアントサイドのコンポーネントに翻訳用のコンテキストを提供します。locale の状態や翻訳を管理し、useGT および useTranslations フックを利用可能にします。

ルートレイアウトに GTProvider を追加します:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

プロジェクトのルートに gt.config.json ファイルを作成します。

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

プロジェクトの対応ロケールをカスタマイズします。選択肢は対応ロケールを参照してください。

環境変数

開発時のホットリロードのために、.env.local ファイルに追加してください：

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

開発環境のみ: 本番では GT_API_KEY を設定しないでください。これは開発時のホットリロード専用です。

無料の API Keys は dash.generaltranslation.com から取得するか、次を実行してください:

npx gtx-cli auth

使い方

これでコンテンツの国際化を始められます。主なアプローチは2つあります。

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

<T> コンポーネントで翻訳できるよう、JSX 要素をラップします。

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>私たちのアプリへようこそ！</h1>
    </T>
  );
}

動的コンテンツには、<Var> のようなvariable componentsを使用します。

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

function Greeting({ user }) {
  return (
    <T>
      <p>こんにちは、<Var>{user.name}</Var>さん！</p>
    </T>
  );
}

詳しくは、<T> コンポーネントの使い方のガイドをご覧ください。

`useGT` を使ったプレーン文字列

属性やラベル、プレーンテキストにuseGTフックを使用する場合:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('メールアドレスを入力')}
      aria-label={t('メール入力欄')}
    />
  );
}

サーバーコンポーネントでは、useGT の代わりに getGT を使用してください。

詳しくは、文字列の翻訳ガイドをご参照ください。

アプリをテストする

言語を切り替えて翻訳をテストします：

<LocaleSelector> を使ってロケール選択用ドロップダウンを追加します:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

開発サーバーを起動します:

npm run dev

yarn run dev

bun run dev

pnpm run dev

localhost:3000 にアクセスし、ロケール選択用ドロップダウンから言語を切り替えます。

開発環境では、翻訳はオンデマンドで行われ（短い読み込み時間が発生します）、本番環境ではすべて事前に翻訳されています。

トラブルシューティング

デプロイ

本番環境ではランタイム翻訳は無効化されているため（<Tx> と tx 関数を除く）、事前にコンテンツを翻訳しておく必要があります。

dash.generaltranslation.com で本番用のAPIキーを取得します。

本番用キーは gtx-api- で始まります（開発用キーは gtx-dev- で始まります）。環境の違いについて詳しくは次を参照してください。
CI/CD 環境に追加します:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
本番用キーに NEXT_PUBLIC_ を付けないでください。サーバーサイド専用のままにする必要があります。
コンテンツを翻訳するために、translate コマンドを実行します:
```
npx gtx-cli translate
```
gt.config.json で translate コマンドの動作を設定できます。

詳細は CLI ツールのリファレンスガイドを参照してください。

ビルド前に翻訳が走るようにビルドスクリプトを更新します:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

次のステップ

<T> コンポーネントガイド - <T> コンポーネントと JSX 翻訳を詳しく解説
文字列翻訳ガイド - useGT と getGT の使い方
Variable コンポーネント - <Var>、<Num> などで動的コンテンツを扱う

前提条件: Next.js App Router、基本的な JavaScript の知識

インストール

gt-next と gtx-cli パッケージをインストールします。

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

構成

`withGTConfig`

withGTConfig 関数は、Next.js アプリケーションで SDK を初期化します。next.config.[js|ts] ファイルに追加してください。

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // 既存のNext.js設定
};

export default withGTConfig(nextConfig. {
  // 追加のGT設定オプション
});

`GTProvider`

ルートレイアウトに GTProvider を追加します:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

プロジェクトのルートに gt.config.json ファイルを作成します。

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

プロジェクトの対応ロケールをカスタマイズします。選択肢は対応ロケールを参照してください。

環境変数

開発時のホットリロードのために、.env.local ファイルに追加してください：

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

開発環境のみ: 本番では GT_API_KEY を設定しないでください。これは開発時のホットリロード専用です。

無料の API Keys は dash.generaltranslation.com から取得するか、次を実行してください:

npx gtx-cli auth

使い方

これでコンテンツの国際化を始められます。主なアプローチは2つあります。

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

<T> コンポーネントで翻訳できるよう、JSX 要素をラップします。

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>私たちのアプリへようこそ！</h1>
    </T>
  );
}

動的コンテンツには、<Var> のようなvariable componentsを使用します。

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

function Greeting({ user }) {
  return (
    <T>
      <p>こんにちは、<Var>{user.name}</Var>さん！</p>
    </T>
  );
}

詳しくは、<T> コンポーネントの使い方のガイドをご覧ください。

`useGT` を使ったプレーン文字列

属性やラベル、プレーンテキストにuseGTフックを使用する場合:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('メールアドレスを入力')}
      aria-label={t('メール入力欄')}
    />
  );
}

サーバーコンポーネントでは、useGT の代わりに getGT を使用してください。

詳しくは、文字列の翻訳ガイドをご参照ください。

アプリをテストする

言語を切り替えて翻訳をテストします：

<LocaleSelector> を使ってロケール選択用ドロップダウンを追加します:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

開発サーバーを起動します:

npm run dev

yarn run dev

bun run dev

pnpm run dev

localhost:3000 にアクセスし、ロケール選択用ドロップダウンから言語を切り替えます。

開発環境では、翻訳はオンデマンドで行われ（短い読み込み時間が発生します）、本番環境ではすべて事前に翻訳されています。

トラブルシューティング

デプロイ

本番環境ではランタイム翻訳は無効化されているため（<Tx> と tx 関数を除く）、事前にコンテンツを翻訳しておく必要があります。

dash.generaltranslation.com で本番用のAPIキーを取得します。

本番用キーは gtx-api- で始まります（開発用キーは gtx-dev- で始まります）。環境の違いについて詳しくは次を参照してください。
CI/CD 環境に追加します:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
本番用キーに NEXT_PUBLIC_ を付けないでください。サーバーサイド専用のままにする必要があります。
コンテンツを翻訳するために、translate コマンドを実行します:
```
npx gtx-cli translate
```
gt.config.json で translate コマンドの動作を設定できます。

詳細は CLI ツールのリファレンスガイドを参照してください。

ビルド前に翻訳が走るようにビルドスクリプトを更新します:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

次のステップ

<T> コンポーネントガイド - <T> コンポーネントと JSX 翻訳を詳しく解説
文字列翻訳ガイド - useGT と getGT の使い方
Variable コンポーネント - <Var>、<Num> などで動的コンテンツを扱う

前提条件: Next.js App Router、基本的な JavaScript の知識

インストール

gt-next と gtx-cli パッケージをインストールします。

npm i gt-next gtx-cli

yarn add gt-next
yarn add --dev gtx-cli

bun add gt-next
bun add --dev gtx-cli

pnpm add gt-next
pnpm add --save-dev gtx-cli

構成

`withGTConfig`

withGTConfig 関数は、Next.js アプリケーションで SDK を初期化します。next.config.[js|ts] ファイルに追加してください。

next.config.ts

import { withGTConfig } from 'gt-next/config';

const nextConfig = {
  // 既存のNext.js設定
};

export default withGTConfig(nextConfig. {
  // 追加のGT設定オプション
});

`GTProvider`

ルートレイアウトに GTProvider を追加します:

app/layout.tsx

import { GTProvider } from 'gt-next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <GTProvider>
          {children}
        </GTProvider>
      </body>
    </html>
  );
}

プロジェクトのルートに gt.config.json ファイルを作成します。

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["fr", "es", "de"]
}

プロジェクトの対応ロケールをカスタマイズします。選択肢は対応ロケールを参照してください。

環境変数

開発時のホットリロードのために、.env.local ファイルに追加してください：

.env.local

GT_API_KEY="your-dev-api-key"
GT_PROJECT_ID="your-project-id"

開発環境のみ: 本番では GT_API_KEY を設定しないでください。これは開発時のホットリロード専用です。

無料の API Keys は dash.generaltranslation.com から取得するか、次を実行してください:

npx gtx-cli auth

使い方

これでコンテンツの国際化を始められます。主なアプローチは2つあります。

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

<T> コンポーネントで翻訳できるよう、JSX 要素をラップします。

import { T } from 'gt-next';

function Welcome() {
  return (
    <T>
      <h1>私たちのアプリへようこそ！</h1>
    </T>
  );
}

動的コンテンツには、<Var> のようなvariable componentsを使用します。

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

function Greeting({ user }) {
  return (
    <T>
      <p>こんにちは、<Var>{user.name}</Var>さん！</p>
    </T>
  );
}

詳しくは、<T> コンポーネントの使い方のガイドをご覧ください。

`useGT` を使ったプレーン文字列

属性やラベル、プレーンテキストにuseGTフックを使用する場合:

import { useGT } from 'gt-next';

function ContactForm() {
  const t = useGT();
  
  return (
    <input 
      placeholder={t('メールアドレスを入力')}
      aria-label={t('メール入力欄')}
    />
  );
}

サーバーコンポーネントでは、useGT の代わりに getGT を使用してください。

詳しくは、文字列の翻訳ガイドをご参照ください。

アプリをテストする

言語を切り替えて翻訳をテストします：

<LocaleSelector> を使ってロケール選択用ドロップダウンを追加します:

import { LocaleSelector } from 'gt-next';

function App() {
  return <LocaleSelector />;
}

開発サーバーを起動します:

npm run dev

yarn run dev

bun run dev

pnpm run dev

localhost:3000 にアクセスし、ロケール選択用ドロップダウンから言語を切り替えます。

開発環境では、翻訳はオンデマンドで行われ（短い読み込み時間が発生します）、本番環境ではすべて事前に翻訳されています。

トラブルシューティング

デプロイ

本番環境ではランタイム翻訳は無効化されているため（<Tx> と tx 関数を除く）、事前にコンテンツを翻訳しておく必要があります。

dash.generaltranslation.com で本番用のAPIキーを取得します。

本番用キーは gtx-api- で始まります（開発用キーは gtx-dev- で始まります）。環境の違いについて詳しくは次を参照してください。
CI/CD 環境に追加します:
```
GT_PROJECT_ID=your-project-id
GT_API_KEY=gtx-api-your-production-key
```
本番用キーに NEXT_PUBLIC_ を付けないでください。サーバーサイド専用のままにする必要があります。
コンテンツを翻訳するために、translate コマンドを実行します:
```
npx gtx-cli translate
```
gt.config.json で translate コマンドの動作を設定できます。

詳細は CLI ツールのリファレンスガイドを参照してください。

ビルド前に翻訳が走るようにビルドスクリプトを更新します:

package.json

{
  "scripts": {
    "build": "npx gtx-cli translate && <...YOUR_BUILD_COMMAND...>"
  }
}

次のステップ

<T> コンポーネントガイド - <T> コンポーネントと JSX 翻訳を詳しく解説
文字列翻訳ガイド - useGT と getGT の使い方
Variable コンポーネント - <Var>、<Num> などで動的コンテンツを扱う

Next.js クイックスタート

General Translation プラットフォームを使いたくない場合は？

ブラウザの言語を変更したのに、アプリの言語が変わりません。

開発環境で言語の読み込みに時間がかかるのはなぜですか？

一部の翻訳が不正確なのはなぜですか？

General Translation プラットフォームを使っていない場合はどうすればよいですか？

このページについて

Next.js クイックスタート

General Translation プラットフォームを使いたくない場合は？

ブラウザの言語を変更したのに、アプリの言語が変わりません。

開発環境で言語の読み込みに時間がかかるのはなぜですか？

一部の翻訳が不正確なのはなぜですか？

General Translation プラットフォームを使っていない場合はどうすればよいですか？

このページについて

Next.js クイックスタート

General Translation プラットフォームを使いたくない場合は？

ブラウザの言語を変更したのに、アプリの言語が変わりません。

開発環境で言語の読み込みに時間がかかるのはなぜですか？

一部の翻訳が不正確なのはなぜですか？

General Translation プラットフォームを使っていない場合はどうすればよいですか？

このページについて

GitHubGitHub でスターする

GitHubGitHub でスターする

GitHub でスターする

GitHub でスターする