next-intl
5分以内に next-intl プロジェクトを自動翻訳
概要
このチュートリアルでは、next-intl を使用している場合に、プロジェクトの翻訳ファイルを自動で管理する方法を説明します。
次の4つの手順に従います:
ヒント:
<T> コンポーネントを使えば、翻訳ファイルの取り回しは不要になります。
ステップ 1: 環境変数を追加する
本番用のAPIキーとプロジェクトIDを環境変数に追加します。
これは gtx-cli ツールを使用するために必要です。
これらは General Translation のダッシュボード から取得できます。
GT_API_KEY=<APIキー>
GT_PROJECT_ID=<プロジェクトID>ステップ 2: gtx-cli のインストール
プロジェクトに gtx-cli ツールをインストールします。
npm i gtx-cliyarn add --dev gtx-clibun add --dev gtx-clipnpm add --save-dev gtx-cliステップ 3: gt.config.json ファイルを作成する
プロジェクトのルートに gt.config.json ファイルを作成します。
{
"defaultLocale": "en",
"locales": ["zh", "es", "ja"],
"files": {
"json": {
"include": ["i18n/[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(コマンドラインインターフェイス)ツールの使用ガイドをご覧ください。
このガイドはいかがですか?