i18next

概要

このチュートリアルでは、i18nextでプロジェクトの翻訳ファイルを自動的に管理する方法を紹介します。

以下の4つのステップに従います：

環境変数を追加する

gtx-cliをインストールする

gt.config.jsonファイルを作成する

ヒント: <T> コンポーネントを使用して翻訳ファイルを使う手間を省きましょう。

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

.env

GT_API_KEY=<your-api-key>
GT_PROJECT_ID=<your-project-id>

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

npm i --save-dev gtx-cli

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

gt.config.json

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

必要に応じてgt.config.jsonファイルをカスタマイズしてください。詳細については設定ドキュメントを参照してください。

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

翻訳は元の文字列構文を保持します。

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

package.json

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

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

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