Next.js App Router 向け Locadex

Next.js アプリの翻訳を自動化

Next.js アプリをフランス語 🇫🇷、スペイン語 🇪🇸、日本語 🇯🇵、そのほかの言語に対応させるのは大変で時間がかかります。

Locadex は、国際化(i18n)の作業を丸ごと引き受けるために設計された AI エージェントです。 インストールはわずか 5 分です。

Locadex のインストール画面

Locadex では次のことが行えます:

  • プロジェクトを gt-next の i18n ライブラリで動作するように設定
  • 多言語対応のために React コンポーネントや文字列を自動調整
  • アプリを必要なだけ多言語に翻訳
  • 新しいコンテンツをプッシュするたびに、国際化と翻訳を継続的に実行

セットアップ手順

ステップ 1: General Translation のダッシュボードにサインイン

ダッシュボードにアクセスし、アカウントにサインインします。

ステップ 2: GitHub を接続

  1. ダッシュボードの GitHub 連携セクションに移動します
  2. 「Connect GitHub」をクリックして GitHub アカウントを連携します
  3. 接続を承認するために GitHub にリダイレクトされます

ステップ 3: GitHub アプリをインストールする

  1. GitHub を接続すると、Locadex の GitHub アプリのインストール画面にリダイレクトされます
  2. Locadex にアクセス権を付与するリポジトリを選びます:
    • すべてのリポジトリにインストール、または
    • 特定のリポジトリを選択
  3. 「Install」をクリックして GitHub アプリのインストールを完了します

ステップ4: リポジトリをプロジェクトにリンクする

  1. GTのダッシュボードに戻り、国際化したいリポジトリを選択します
  2. これにより、リポジトリが翻訳設定とターゲット言語に関連付けられます
  3. 1つのプロジェクトにリンクできるリポジトリは1つのみですが、複数のプロジェクトを作成し、各プロジェクトに異なるリポジトリを割り当てることができます

ステップ 5: 設定の構成

設定画面で次を行います:

  • 対象言語: 翻訳先の対応ロケールを選択する

Locadex installation screen

ステップ 6: インストールの完了

  1. 設定を確認します
  2. 「Install」をクリックして、リポジトリで Locadex を有効にします
  3. 接続された GitHub リポジトリが表示される概要ページに移動します

次のステップ

初期セットアップ

インストールが完了すると、次の処理が行われます:

  1. PRの即時作成: Locadex がメインブランチに Pull Request を作成します
  2. フルセットアップ: この PR は以下を実行する Locadex のフルセットアップコマンドを走らせます:
    • GT ライブラリをインストール
    • プロジェクトを国際化向けに設定
    • 翻訳インフラをセットアップ
  3. レビューとマージ: PR をレビューしてマージし、i18n のセットアップを完了します

継続的な国際化

初期セットアップがマージされた後は、次のように進みます。

  1. Locadex がメインブランチまたは指定ブランチのプルリクエストを監視します
  2. 翻訳対象のコンテンツを含む新しいコードをプッシュしたら、Locadex がそのコミットをPRに追加するまで待ちます
  3. Locadex がPRにコミットしたら、安全にマージできます — 新しいコードは国際化されています
  4. 手作業による介入なしに、アプリは翻訳済みの状態を保ちます

リポジトリのモニタリング

Locadex の GitHub 接続パネル

Locadex の構成パネル

ダッシュボードのステータス

ダッシュボードでは、次の項目を確認できます:

  • リポジトリのステータス: 監視が有効であることを示すインジケーター
  • 設定: 現在の設定と対象言語

GitHub 連携

  • ステータスチェック: Locadex がプルリクエストにステータス更新を追加します
  • チェックラン: GitHub 上に Locadex の処理状況が表示されます

トラブルシューティング

よくある問題

Locadex が PR を作成しない

  • GitHub アプリに対象リポジトリへのアクセス権があるか確認する
  • コミットに翻訳対象のコンテンツが含まれているか確認する

設定の変更が必要

  • GT のダッシュボードでブランチ設定を更新する
  • 変更は更新後の新規コミットから適用される

対応フレームワーク

現在、Locadex が対応しているのは Next.js の App Router を用いたアプリのみです。

このガイドはどうでしたか?

Next.js App Router 向け Locadex