Next.jsでglobalize.nowを使う
Next.jsアプリの国際化対応を5分以内にセットアップできます。
Next.jsはnext-intlやnext-i18nextといったライブラリを通じて優れたi18nサポートを備えていますが、これらのライブラリは翻訳キーが既に整備されているコードベースを前提としています。globalize.nowはその前段階を担うツールです。ハードコードされた英語だらけのNext.jsアプリを受け取り、next-intl（または任意のランタイムライブラリ）が利用できるキー、ロケールファイル、そしてリファクタリング済みのコンポーネントを生成します。
前提条件
- Next.jsプロジェクト（App RouterまたはPages Router）
- Gitリポジトリ
- Node.js 18以上
- 選定済みのi18nランタイムライブラリ（next-intl推奨）
Next.jsでglobalize.nowをセットアップする方法
ランタイムライブラリをインストールする
next-intlまたはお好みのライブラリを追加し、アプリがロケールごとのメッセージを実行時に読み込めるようにします。
npm install next-intlnext-intlの基本的なルーティングを設定する
next-intlのドキュメントに記載されている通りにミドルウェア、プロバイダー、ルートセグメントを設定してください。すでに完了している場合はこの手順は不要です。
Globalizeスキルインストーラーを実行する
Next.jsプロジェクトのルートから、エージェントがルーティング設定に合わせられるようにスキルをインストールします。
npx skills add globalize-now/globalize-skills --allnext-intlの検出結果を確認する
プロバイダーとメッセージのパスが、globalize.nowがNext.jsに対して想定している規約に一致しているかをエージェントに確認させます。
提案されたロケールファイルの構成を確認する
提案されたmessagesディレクトリとファイル名を確認し、選択した「ロケールごとのメッセージ」パターンに沿っているかを確認します。
文字列を翻訳呼び出しへリファクタリングする
埋め込まれた英語をt()または同等のヘルパー関数（プロバイダーに接続済み）に置き換える更新を承認します。
Gitにプッシュする
ブランチをマージしてプッシュすることで、以降のGitプッシュのたびにglobalize.nowが翻訳の同期を維持できるようにします。
よくある問題
next-intlは特定のメッセージ構造を前提としている
解決方法: globalize.nowはnext-intlの規約を自動検出し、設定済みのロケールフォルダに合致したJSONを書き出すため、手作業での構造調整を減らせます。
すでにいくつか翻訳済みの文字列があります。globalize.nowはそれらを上書きしてしまいますか？
解決方法: 既存のキーは可能な限り保持され、新しい文字列は段階的に追加されるため、翻訳者のこれまでの作業が失われることはありません。
よくある質問
globalize.nowはnext-intlやnext-i18nextに対応していますか？
はい。globalize.now はリポジトリの構造――キー、JSONカタログ、コンポーネントの呼び出し箇所――に専念し、実行時のメッセージ読み込みは next-intl や next-i18next に任せます。ルーティングのモデルに合わせて好きなランタイムを選べば、globalize.now はその選択に合わせて出力を調整します。プロジェクトの初期構築時に一度 npx skills add globalize-now/globalize-skills を実行すれば十分で、意図的にスキルを更新したい場合を除いて再実行の必要はありません。
globalize.now は App Router と Pages Router の両方に対応していますか？
はい。エージェントスキルが使用中のルーターの方式を検出し、レイアウトファイル、ルートハンドラー、プロバイダーに合わせて正しく抽出を行います。globalize.now は Next.js のルーティングを置き換えるものではなく、そのルートを通過する文字列がきちんとキー化されることを保証します。セットアップ後は、App Router のサーバーコンポーネントとクライアントコンポーネントの両方が、ランタイムが期待するのと同じロケールファイルを参照します。
すでに部分的に i18n が導入されている Next.js アプリでも globalize.now を使えますか？
はい。エージェントをそのリポジトリに向けて実行すれば、既存のメッセージバンドルを拡張し、まだハードコードされたままの箇所を埋めていきます。これはマーケティングページだけ先に翻訳されていたようなケースでよく見られます。globalize.now は古い翻訳を破棄することなく新しいキーをマージするので、チームは画面ごとに段階的に移行できます。
globalize.now はサーバーコンポーネントとクライアントコンポーネントを区別して扱いますか？
globalize.now は、各境界でスタックが使用しているヘルパーに合わせてリテラルを書き換え、フックやプロバイダーがどこで動作できるかという Next.js のルールを尊重します。JSON の出力はサーバーとクライアントのバンドル間で共有されるため、カタログを二重管理する必要はありません。インタラクティブ性が必要な箇所でクライアントコンポーネントとしてマークするかどうかは、引き続き Next.js のドキュメントに従います。
globalize.now は Next.js の静的生成とどのように連携しますか？
ロケールファイルは Git 上で管理されるため、`next build` は SSG や SSR のルートが next-intl 経由ですでにインポートしているのと同じ JSON を引き続きバンドルします。globalize.now は、文字列がリテラルではなくデータファイルから取得されるようにする以外、静的生成のパイプラインを変更しません。新しい文言がリリースされた場合は、もう一度 Git に push することで、次のデプロイ前に翻訳が更新されます。
npx skills add globalize-now/globalize-skills を実行する前に next-intl をインストールしておくべきですか？
すでに使用するランタイムが next-intl だと分かっている場合は、先にインストールしておくのが理想的です。そうすればエージェントがすぐにプロバイダーを組み込めます。まだライブラリを決めていない場合でも、npx skills add globalize-now/globalize-skills は実行できます――スキルが最適なスタックの選定を助けてくれます――が、依存関係をインストールした後にセットアップを再実行することもできます。いずれの手順でも、最終的にキーは Git にコミットされ、push のたびに同期されます。
Next.js で globalize.now を試してみる
プロジェクトのルートから開始してください：
npx skills add globalize-now/globalize-skills --all