概要

このチュートリアルでは、i18next を使用している場合に、プロジェクトの翻訳ファイルを自動管理する方法を説明します。

次の4つの手順に従います。

ステップ 1: 環境変数を追加する

本番用のAPIキーとプロジェクトIDを環境変数に追加します。 これは gtx-cli ツールを使用するために必要です。 General Translation のダッシュボードから取得できます。

GT_API_KEY=<あなたのAPIキー>
GT_PROJECT_ID=<あなたのプロジェクトID>

ステップ 2: gtx-cli のインストール

プロジェクトに gtx-cli ツールをインストールします。

npm i gtx-cli

yarn add --dev gtx-cli

bun add --dev gtx-cli

pnpm add --save-dev gtx-cli

ステップ3: gt.config.json ファイルを作成する

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

{
  "defaultLocale": "en",
  "locales": ["zh", "es", "ja"],
  "files": {
    "json": {
      "include": ["messages/[locale]/*.json"]
    }
  }
}

必要に応じて gt.config.json をカスタマイズしてください。詳しくは 設定 ドキュメントをご覧ください。

プロジェクト構成に合わせて include パスが一致するように、json のファイル形式を更新してください。

ステップ 4: ビルドプロセスに gtx-cli translate コマンドを追加する

ビルドコマンドの実行前に、ビルドまたはCIプロセスへ gtx-cli translate コマンドを追加し、翻訳を自動的にプロジェクトに取り込みます。

{
  "scripts": {
    "translate": "npx gtx-cli translate",
    "build": "npm run translate && <your build command>"
  }
}

これにより、すべての対応ロケールの翻訳が生成され、プロジェクトに保存されます。 これらのファイルをリポジトリにコミットしたい場合は、コミットの前に代わりにこのコマンドを実行してください。

完了です！これで、プロジェクトに変更があるたびに、翻訳用のJSONファイルが自動的にすべて更新されます。

注意事項

• gtx-cli translate コマンドを使うと、プロジェクトに翻訳を自動で追加できます。
• 翻訳ファイルをコミットしたい場合は、コミット前に gtx-cli translate コマンドを実行してください。
• 翻訳の出力先パスを設定する方法は、設定 ドキュメントを参照してください。

次のステップ

• CLI ツールの利用ガイドをご覧ください。