Next.js 16.3 — AGENTS.mdとDevTools MCPの活用法

Haram

@haram

最近公開されたNext.js 16.3プレビューの情報はご覧になりましたか?今回のアップデートは、「AIエージェントのためのウェブフレームワーク」という方向性が非常に明確に感じられます。特にCursorやClaude Codeなどのツールを使っている方にとって便利な機能が多数追加されました。

最も興味深い点は、AGENTS.md という規格が公式に活用され始めたことです。create-next-appでプロジェクトを作成すると、このファイルが自動生成されます。開発サーバーを起動する際にAIエージェントが検知されると、node_modules/next/dist/docs/ パスにローカルで格納されている正確なバージョンのフレームワークドキュメントを読み込むよう誘導します。Vercelの内部評価によると、エージェントが必要な時に検索ツールを呼び出させるよりも、このようにローカルドキュメントを直接渡す方式の方が誤作動を大幅に減らし、成功率100%を達成したとのことです。

さらに、開発サーバー内部をエージェントに丸ごと接続できるnext-devtools-mcp 機能も非常に魅力的です。エージェントがエラーログを読み込み、ルーティングマップを参照して自律的にデバッグを行うことができます。設定も思った以上に非常に簡単です。ローカルまたはグローバルな.mcp.json ファイルに以下の設定をコピー&ペーストするだけで準備完了です。

json
{
  "mcpServers": {
    "next-devtools": {
      "command": "npx",
      "args": ["-y", "next-devtools-mcp@latest"]
    }
  }
}

これに加えて、既存のnext-browser CLIがagent-browser ライブラリに統合されたことで、エージェントがヘッドレスChromeやReact Developer Toolsを直接活用できるようになりました。エラーの原因を探るためにターミナルでnpx skills add vercel-labs/next-browser コマンドを入力し、エージェントにReactコンポーネントツリーを解析させることも可能です。コードをいちいち手動でエージェントに貼り付ける手間が省けるので、開発体験が非常に快適になりそうですね。