next-intl

概要

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

次の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

yarn add --dev gtx-cli

bun add --dev gtx-cli

pnpm add --save-dev gtx-cli

プロジェクトのルートディレクトリに gt.config.json ファイルを作成してください。

gt.config.json

{
  "defaultLocale": "en",
  "locales": ["zh", "es", "ja"],
  "files": {
    "json": {
      "include": ["i18n/[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ファイルが自動的に更新されます。