i18next

i18nextプロジェクトを自動的に翻訳する(5分未満)

概要

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

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

環境変数を追加する

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

gtx-cli initコマンドでプロジェクトを初期化する

gtx-cli translateを実行する

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


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

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

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

ステップ2:gtx-cliをインストールする

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

npm i --save-dev gtx-cli

ステップ3:gtx-cli initコマンドでプロジェクトを初期化する

gtx-cli initコマンドを実行してプロジェクトを設定します。

npx gtx-cli init

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

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

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

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

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


注意点

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

次のステップ

  • CLIツールの使用ガイドを参照してください。
  • 開発中にライブ翻訳を確認したい場合(ホットリロードのようなもの)、<T>コンポーネントをチェックしてください。

このページについて