gt-next & gt-react

gt-next または gt-react プロジェクトを自動翻訳する

概要

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

注意: これは本番ビルドを出荷する場合のみ使用してください。開発環境で gt-next または gt-react を使用している場合、このコマンドは必要ありません。

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

環境変数を追加します

npx gtx-cli configure コマンドでプロジェクトを設定します

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: npx gtx-cli configure コマンドでプロジェクトを設定する

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

npx gtx-cli configure

ステップ 3: 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>コンポーネントをチェックしてください。

このガイドはいかがですか?