こんにちは！kozokaAI（MONO-X AI事業部）の山下マナトです！^^✨👌💖👍👍👍
先月末から待望のNext.js 16がナウアベイラブルです！
今回のアップデートで特に大きいのが、開発体験をガッと良くしてくれる MCP（Model Context Protocol） がフレームワークに組み込まれたことです。
この記事では、Next.js 16 に統合された MCP の基本や、DevTools MCP との関係、実際に触って「これ便利！」と思ったポイントをまとめて紹介していきます。
Next.js 16 の MCP って何？
Next.js 16 では、開発サーバ自体に 組み込み MCP サーバ が搭載されました。
ざっくり言うと、ブラウザでアプリを動かしている途中の「内部状態」を AI が直接取りにいけるようになる仕組みです。
公式ガイドはこちら：
これまでは AI に状況を説明するために、
- スクショを貼る
- ログをコピペする
- curlでHTMLを読ませる
…みたいに、ちょっと面倒な手作業が必要でしたよね。
Next.js 16 の MCP は、そういった手間を まるっと自動化 してくれます。
MCP は2種類ある（Next.js組み込み版 / DevTools版）
Next.js まわりの MCP はざっくり2つに分かれます。
1. Application Runtime Access（Next.js 16 標準搭載）
Next.js 16 の開発サーバに最初から入っている MCP。
- エンドポイント：
/_next/mcp - 動いているアプリの構造・状態・ログ・エラーまで取得OK
- ページルート、メタデータ、コンポーネント構造も見える
- Hydration error や server log も拾える
- Server Actions の情報も取得可能
つまり AI が「今このアプリに何が起きているのか」を直接把握できます。
2. Development Tools（next-devtools-mcp）
こっちは外部パッケージとして提供される MCP。
-
npx next-devtools-mcpで起動 - Next.js 16 より前でも使える
- ガイド、ドキュメント、Playwright支援ツールなどを提供
- Next.js 組み込み MCP への bridge 役
提供ツールは例えばこんな感じ：
- browser_eval
- enable-cache-components
- nextjs_docs
- nextjs_runtime（組み込み MCP への中継）
- upgrade-nextjs-16
この2種類を組み合わせることで、AI と Next.js がしっかりつながる世界になります。
DevTools MCP の導入例（Claude / Codex / Cursor）
各エディタの MCP クライアントで DevTools MCP を追加するだけ。
Claude Code
claude mcp add next-devtools npx next-devtools-mcp@latest
Codex
codex mcp add next-devtools -- npx next-devtools-mcp@latest
Cursor
.cursor/mcp.json にこれを追加：
"next-devtools": {
"command": "npx -y next-devtools-mcp@latest",
"env": {},
"args": []
}
DevTools MCP が提供する主要ツール
提供される MCP tool は大体6種類ほど。
- browser_eval
- enable_cache_components
- init
- nextjs_docs
- nextjs_runtime
- upgrade_nextjs_16
特に大事なのが nextjs_runtime。
これが Next.js 16 標準の MCP とやり取りする “橋渡し役” です。
- dev server を自動で探索して接続
- 利用できる MCP tools を列挙
- ルート・ログ・エラーなど内部情報へアクセス
Next.js 15 → 16 のアップグレードも MCP で補助できる
codex などで実行すると、next-devtools-mcp の "upgrade-nextjs-16"を使用してやってくれます。
- codemod の案内
- 依存関係の更新
- 構造の差分チェック
など、Vercelが推奨するフローでAI が流れを誘導してくれます。
Runtime Diagnostics が超便利（Next.js 16 の本命）
Next.js 16 の MCP が本当に強いのはここ。
これまでの課題
- AI は runtime log を直接見られない
- Next.jsの内部状態がブラックボックス
- ログを毎回手で貼る必要がある
- AIエージェント内でdev serverを立てればいいが、AIが不要な情報に溺れてしまう上にDXが微妙
Next.js 16 からの改善
開発サーバ自身が、
- エラー
- ルート情報
- メタデータ
- コンポーネント構造
- Cache/Server/Client Components の状態
- Hydration error の詳細
これらを MCP 経由で丸ごと返してくれる ように。
実際に hydration error を拾えた例
外で dev server を動かした状態で AI に質問すると、
MCP → DevTools MCP → Next.js MCP
という流れで、
AI が hydration error の内容を完全に理解した状態で回答してくれました。
もうスクショを貼らなくていいのは本当に助かります。
使ってみた感想：まだ荒削りだけど、もう実用レベル
実際に触ってみると、
Next.js 16 のベストプラクティスに従って
Client / Server / Cache Components を整理して
みたいな依頼を投げても、
必ずしも MCP 情報を使うとは限らず、web検索を優先することもまだ多い。
それでも、
- hydration error の検知
- runtime エラーの説明
- コンポーネント構造の取得
- ルート構造の把握
このあたりはしっかり動いていました。
今後のアップデートで、もっと賢く連携できるようになる気がします。
まとめ
- Next.js 16 は MCP を標準搭載
- DevTools MCP と組み合わせると、AI がアプリの内部状態に直接触れる
- Hydration error などの原因特定が自動化され、開発体験が大幅に向上
- アップグレード支援も MCP 経由で可能
- まだ完璧ではないけど、AI × Next.js 開発が新しいステージに入った感 がある
参考
kozokaAI開発チームによるAI tech Blogです。 生成AIや業務支援AI、API連携など、現場で役立つAI活用の実践知を発信中。 AIを活用した業務改善にご興味のある方はぜひフォローしてご覧ください。
Discussion