Next.jsとAIの連携を革新：フレームワークの「目」をAIに与える開発体験

はじめに

ソフトウェア開発において、AIエージェントの活用は目覚ましい進化を遂げています。AIはコードを読み解き、開発サーバーを起動し、ブラウザを操作してテストを実行するなど、多くのタスクをこなせるようになりました。しかし、これらのAIエージェントには一つの大きな課題がありました。それは、Next.jsのようなフレームワークが内部で何を知っているのか、ランタイムで何が起きているのかを「見る」ことができないという点です。つまり、アプリケーション内部で実際に何が起こっているのかについて、AIは「盲目」だったのです。

例えば、AIは現在どのルートがページをレンダリングしているのか、なぜハイドレーションが失敗したのかを知ることができませんでした。フレームワークの核にある豊かで動的なコンテキストは、AIにとって見えない存在だったのです。この状況が、開発者自身がAIとツールの間の「橋渡し役」となり、ボトルネックを生み出す原因となっていました。

しかし、この現状は変わりつつあります。本記事では、AIがフレームワークと直接対話できるようになったことで、開発体験がどのように変革されるのかをご紹介します。具体的には、AIがハイドレーションエラーを修正し、適切なファイルを効率的に編集し、さらにはNext.js 16へのアプリケーション全体の移行をサポートする様子を見ていきます。これらはすべて、「もしAIがフレームワークの『目』を持つことができたらどうなるか？」というシンプルなアイデアによって実現されたものです。

従来の開発ツールとAIの限界

Next.jsでは、これまでも開発者体験（DX）の向上を最優先事項としてきました。より明確なハイドレーションエラー表示、読みやすいコールスタック、そして完全に再設計されたオーバーレイUIなど、多くの改善が施されています。これらのツールは視覚的に分かりやすく、インタラクティブで、画面を見つめる人間のために作られています。エラーオーバーレイが表示されれば、人間は瞬時に何が問題かを把握し、スタックを辿って原因コンポーネントを特定できます。ハイドレーションエラーに対する改善により、ミスマッチの正確な位置も特定できるようになりました。これらは素晴らしい開発者体験を提供しています。

AIへの移行と視覚ツールの限界

しかし、近年では開発ワークフローに大きな変化が起きています。多くの開発者が画面を見つめるのではなく、タスクをAIに委譲するようになっています。オートコンプリートから始まり、AIを活用したIDEが登場し、今やターミナルに直接指示を出すだけで機能が構築されるケースも見られます。このワークフローの根本的な変化は、これまで人間向けに構築されてきた視覚的なツールが、AIエージェントにとっては機能しないことを意味します。

開発者である私たちはエラーオーバーレイをはっきりと見ることができますが、AIにそのエラーを修正するよう指示しても、AIは何について話しているのか理解できません。なぜなら、AIは私たちが目にしているオーバーレイの内容を「見る」ことができないからです。つまり、バグを修正するために不可欠な重要なコンテキストが、AIエージェントのコンテキストウィンドウの外部に存在しているのです。AIはソースコードやターミナル出力は読み取れますが、当時のAIのタスクにとって非常に重要なNext.jsの内部状態は見ることができません。この状況は、人間がボトルネックとなる奇妙な状態を生み出していました。開発者は、デバッグツールからエラーを手動でコピー＆ペーストし、チャットに貼り付ける必要があったのです。つまり、開発者がツールとAIの間を繋ぐ「API」となっていたわけです。これは本来あるべき姿とは逆行しています。

コンテキスト問題の実演

この「コンテキスト問題」を具体的に示すために、あるデモをご紹介します。右側の開発ツールオーバーレイには、ハイドレーションミスマッチのエラーが表示されています。特に、これまでの改善のおかげで、サーバーサイドでレンダリングされたものとクライアントサイドでレンダリングされたものの正確なミスマッチが示されています。この情報は、AIがエラーを修正するために極めて重要です。

しかし、AIに「現在のランタイムエラーが見えますか？」とシンプルな質問を投げかけても、AIは即座にcurlコマンドを実行しようとします。これは、Next.jsに関する多くのコンテキストを持たず、デバッグツールに接続してこの情報を取得する方法を知らないため、AIが最善を尽くそうとした結果です。curlコマンドでは、ブラウザで発生するハイドレーションエラーを取得することはできません。ハイドレーションエラーは静的なHTMLファイルには存在しないためです。その結果、AIは「HTML出力にランタイムエラーは見られません。ページはすべての製品が表示され、正常にレンダリングされているようです」と応答しました。

もしかしたら「PlaywrightやPuppeteerを使えば、AIがブラウザコンソールにアクセスできるようになるのでは？」と考えるかもしれません。しかし、先ほど説明したハイドレーションエラーに関する改善は、コンソールとは異なり、オーバーレイに限定されたものです。コンソールの情報を直接AIに転送するだけでは、オーバーレイで提供される特定の情報は得られません。現状唯一の解決策は、エラーオーバーレイから手動で情報をコピー＆ペーストすることであり、ここでも人間がブラウザとAIの間のAPIとなり、明確なボトルネックとなっていました。

最初の試み：`browserDebugInfoInTerminal`とそのトレードオフ

このボトルネックを解消するため、私たちは初期の試みとして、実験的なフラグbrowserDebugInfoInTerminalを導入しました。このアイデアは非常にシンプルです。ブラウザで発生するすべての事象は、コンソールログの形で出力される可能性が高いと考えました。もしコンソールログをターミナルシェルに転送できれば、AIはターミナルシェルにアクセスできるため、コンソール上のランタイム情報にもアクセスできるようになるというわけです。この流れは以下のようになります。

AIエージェントを起動し、そのエージェント内で開発サーバーを起動するよう指示します。AIはこれを理解し、pnpm devのようなコマンドを実行して開発サーバーを立ち上げます。ページがロードされると、ターミナルに「サーバーとクライアントでレンダリングされたHTMLの間にミスマッチがあります（ヘッダー要素のクラス名、page.tsxの構造化）」といった報告が表示されます。この情報は、ハイドレーションエラーがブラウザコンソールにログとして出力され、それがターミナルに転送されたため、AIがこのログをスキャンして情報を取得できた結果です。このアプローチにより、AIの「盲目」問題は一時的に解決されました。

`browserDebugInfoInTerminal`のトレードオフ

しかし、この解決策にはいくつかのトレードオフが伴いました。

ログに限定される情報: この方法はログとして出力される情報にのみ適用されます。Next.jsのコア内部には、ログとして公開されない、より重要で暗黙的な情報が他にも多数存在します。
ワークフローの不自然さ: AIエージェントを最初に明示的に起動し、その中で開発サーバーを実行し、エージェント自身がターミナルのログをスキャンすることに依存します。これはすべての開発者のコーディングスタイルに合致するわけではありません。同期的なAIワークフローの場合、開発者は自分でコーディングを進め、エラーが発生した際に「このエラーを修正してほしい」とAIに指示する方が自然です。既存の開発サーバーを停止し、AIエージェントに切り替えて再度開発サーバーを起動するというのは、不自然な流れです。
コンテキストウィンドウの肥大化と非効率性: AIがサーバー出力のすべてのファイルをスキャンする必要があり、これは非常にノイズが多くなります。結果として、AIのコンテキストウィンドウを無駄に消費し、処理を遅く、非効率にしてしまいます。関連性の低い情報に溺れることで、AIはその本来の仕事の効率を落としてしまうのです。

これらのトレードオフを踏まえ、私たちは自問しました。「AIにNext.js内部のより多くのコンテキストにアクセスできるようにするという同じ問題を解決しつつ、これらの限界をすべて克服できるとしたらどうだろうか？」と。

まとめ

AIエージェントの進化は目覚ましいものがありますが、Next.jsのようなフレームワークの内部状態に対する「盲目」という課題は、開発ワークフローにおける人間をボトルネックにしていました。従来の視覚的な開発ツールは人間には有効でも、AIエージェントにはそのコンテキストが伝わらないという「コンテキスト問題」が存在したのです。初期の解決策であるbrowserDebugInfoInTerminalは一時的な改善をもたらしましたが、ログに限定される情報、不自然なワークフロー、そしてコンテキストウィンドウの肥大化という重大なトレードオフがありました。

Next.jsチームは、これらの課題を根本的に解決し、AIがフレームワークの「目」を持つことを可能にする、より洗練されたアプローチを模索しています。AIがフレームワークの内部状態を直接理解することで、開発者はより効率的に、そしてより少ない手作業で、複雑なデバッグやアプリケーションの移行といったタスクをAIに委ねられるようになるでしょう。これにより、真に革新的な開発体験が実現されることが期待されます。

参考動画

AI agents can now see inside Next.js

ポイント