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 については、対応ロケールを参照してください。

環境変数

開発時のホットリロード用に、.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> のような 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> を使ってlocale 選択ドロップダウンを追加します:

import { LocaleSelector } from 'gt-next';

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

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

npm run dev

yarn run dev

bun run dev

pnpm run dev

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

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

トラブルシューティング

デプロイ

本番環境では実行時の翻訳は無効です（<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_ を付けないでください。サーバーサイド専用のままにする必要があります。
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設定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 については、対応ロケールを参照してください。

環境変数

開発時のホットリロード用に、.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> のような 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> を使ってlocale 選択ドロップダウンを追加します:

import { LocaleSelector } from 'gt-next';

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

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

npm run dev

yarn run dev

bun run dev

pnpm run dev

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

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

トラブルシューティング

デプロイ

本番環境では実行時の翻訳は無効です（<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_ を付けないでください。サーバーサイド専用のままにする必要があります。
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設定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 については、対応ロケールを参照してください。

環境変数

開発時のホットリロード用に、.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> のような 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> を使ってlocale 選択ドロップダウンを追加します:

import { LocaleSelector } from 'gt-next';

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

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

npm run dev

yarn run dev

bun run dev

pnpm run dev

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

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

トラブルシューティング

デプロイ

本番環境では実行時の翻訳は無効です（<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_ を付けないでください。サーバーサイド専用のままにする必要があります。
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でスターを付ける