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つあります。

`<T>` を使った JSX コンテンツ

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

import { T } from 'gt-next';

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

動的コンテンツには、<Var> のような変数コンポーネントを使用します。

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_ を付与しないでください。サーバーサイド専用のままにする必要があります。
翻訳コマンドを実行してコンテンツを翻訳します:
```
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つあります。

`<T>` を使った JSX コンテンツ

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

import { T } from 'gt-next';

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

動的コンテンツには、<Var> のような変数コンポーネントを使用します。

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_ を付与しないでください。サーバーサイド専用のままにする必要があります。
翻訳コマンドを実行してコンテンツを翻訳します:
```
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つあります。

`<T>` を使った JSX コンテンツ

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

import { T } from 'gt-next';

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

動的コンテンツには、<Var> のような変数コンポーネントを使用します。

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_ を付与しないでください。サーバーサイド専用のままにする必要があります。
翻訳コマンドを実行してコンテンツを翻訳します:
```
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 でスターする