Next.js クイックスタート

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

クイックセットアップ: 自動設定には npx gtx-cli@latest をお試しください。詳しくはセットアップウィザードを参照するか、AI ツール統合をご利用ください。

インストール

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 の options
});

`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"]
}

プロジェクトの対応ロケールをカスタマイズします。利用可能なoptionsは、supported localesをご覧ください。

環境変数

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

.env.local

GT_API_KEY="開発用APIキー"
GT_PROJECT_ID="プロジェクトのid"

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

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

npx gtx-cli auth

使い方

これでコンテンツの国際化を始められます。主な方法は次の2つです。

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

JSX 要素を <T> コンポーネントでラップして翻訳します：

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 関数を除く）、コンテンツを事前に翻訳しておく必要があります。

本番用のAPIキーを取得: dash.generaltranslation.com から入手します。

本番用キーは 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 Tool のリファレンスガイドをご覧ください。

ビルドスクリプトを更新し、ビルド前に翻訳を実行:

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 の options
});

`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"]
}

プロジェクトの対応ロケールをカスタマイズします。利用可能なoptionsは、supported localesをご覧ください。

環境変数

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

.env.local

GT_API_KEY="開発用APIキー"
GT_PROJECT_ID="プロジェクトのid"

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

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

npx gtx-cli auth

使い方

これでコンテンツの国際化を始められます。主な方法は次の2つです。

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

JSX 要素を <T> コンポーネントでラップして翻訳します：

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 関数を除く）、コンテンツを事前に翻訳しておく必要があります。

本番用のAPIキーを取得: dash.generaltranslation.com から入手します。

本番用キーは 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 Tool のリファレンスガイドをご覧ください。

ビルドスクリプトを更新し、ビルド前に翻訳を実行:

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 の options
});

`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"]
}

プロジェクトの対応ロケールをカスタマイズします。利用可能なoptionsは、supported localesをご覧ください。

環境変数

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

.env.local

GT_API_KEY="開発用APIキー"
GT_PROJECT_ID="プロジェクトのid"

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

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

npx gtx-cli auth

使い方

これでコンテンツの国際化を始められます。主な方法は次の2つです。

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

JSX 要素を <T> コンポーネントでラップして翻訳します：

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 関数を除く）、コンテンツを事前に翻訳しておく必要があります。

本番用のAPIキーを取得: dash.generaltranslation.com から入手します。

本番用キーは 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 Tool のリファレンスガイドをご覧ください。

ビルドスクリプトを更新し、ビルド前に翻訳を実行:

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でスターを付ける