Next.js 16.3: AI Improvements

公開日: 2026-06-26

投稿者: Aurora Scharff (@aurorascharff), Jude Gao (@gao_jude)

Next.js 16.3 Preview がパブリックテスト用に利用可能になりました。npm に @preview タグで新しい Next.js リリースを公開しているため、本日から 16.3 を試すことができます。数週間以内に安定版を出荷する予定です。プレビューに関するフィードバックは GitHub でお寄せください。

Next.js 16.3 Preview が安定版に近づくにつれて、内部に何が含まれているかを紹介する一連の記事を共有しています。最初の記事「Instant Navigations」は新しいレンダリングとプリフェッチのプリミティブについて扱っています。この第二の記事は AI 関連の改善に焦点を当てます。

Next.js は App Router の安定化以降大きく成長しており、その成長の多くは Claude Code、Cursor、Codex のようなエージェント経由で書かれたコードによって駆動されています。もし Next.js がエージェント駆動の開発を主眼に設計されていたらどうなるでしょうか？まだ完全には到達していませんが、リリースごとに確実に近づいています。

Next.js 16 では DevTools MCP サーバーを追加し、Next.js 16.2 ではドキュメントのバンドル化とエージェントが実ブラウザを操作できる実験的な CLI である next-browser を導入しました。Next.js 16.3 では以下を拡張しています：

• AGENTS.md を介したバンドル化ドキュメント：エージェントがトレーニングデータではなく、バージョンに一致したドキュメントを読むようにする
• ファーストパーティ Skills：エージェントがマルチステップのワークフローを実行するのに役立つ Skills
• React インスペクションを備えた Agent Browser：実ブラウザを操作し、agent-browser から React の状態を検査できる
• Actionable errors：開発オーバーレイで選んだ修正をコピーしてペースト可能なプロンプトとして取得、ターミナルやルール別のドキュメントページにも反映
• より小さく焦点を絞った MCP サーバー：ビルド診断用の新しいツール（ナレッジベース系は廃止）
• Markdown としてのドキュメント：任意のドキュメント URL に ".md" を付けるとプレーンな Markdown 版を取得

AGENTS.md を介したバンドル化ドキュメント

16.2 リリースで、Next.js ドキュメントをプロジェクトにバンドルし、エージェントがローカルで読めるようにすることを始めました。create-next-app で 16.2 以降に作成されたプロジェクトはすでに AGENTS.md をそのドキュメントに向けています。16.3 では next dev がそのポインタを自動で書き換え／更新するようになり、既存プロジェクトはアップグレード時に最新の状態が保たれます。

16.1 以前の場合は、手動で codemod を実行してください：

npx @next/codemod@canary agents-md

next dev が AGENTS.md に挿入する内容の例：

<!-- BEGIN:nextjs-agent-rules -->
# This is NOT the Next.js you know
This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
<!-- END:nextjs-agent-rules -->

このブロックは、next dev が環境内に AI コーディングエージェントを検出し、マーカーがまだ存在しない場合にのみ書き込まれます。マーカーの外側にある内容はそのまま保持され、next.config.ts に agentRules: false を設定すればオプトアウトできます。ブロックが差分として出た場合でも、そのままコミットしてください。

ファーストパーティ Skills

Skills はエージェントにフレームワーク固有のコンテキストを与えます。以前に skills.sh から提供していた知識ベースの Skills（App Router の慣習やキャッシュ API を扱うもの）をインストールしているかもしれません。バンドル化ドキュメントが AGENTS.md 経由でエージェントに届くようになったため、それらの知識 Skills は段階的に廃止しています。削除するには npx skills update を実行してください。

ただし、ドキュメントだけではエンドツーエンドで完結できないマルチステップワークフローでは Skills が有用です。Next.js 16.3 ではそのための3つのファーストパーティ Skill を追加しました。

next-dev-loop

next-dev-loop Skill はコーディングエージェントに開発のフィードバックループ全体へのアクセスを与えます。ブラウザを操作し、コンソールを読み、ネットワークリクエストを追い、React ツリーを検査しつつ反復できます。主なインターフェースは：

• /_next/mcp：ルート、サーバーログ、コンパイル問題に対するフレームワーク側のビュー
• agent-browser：DOM、コンソール、ネットワーク、React ツリーに対するブラウザ側のビュー

この Skill は agent-browser バージョン 0.27 以降を必要とします。

インストール例：

terminal npx skills add vercel/next.js --skill next-dev-loop

エージェントに次のように促します（例）：

After every edit, verify the page still works at runtime using the next-dev-loop skill.

（例）Claude が next-dev-loop を通して編集、コンパイル、リロード、結果の検査を行う様子。

next-cache-components-adoption

next-cache-components-adoption Skill はプロジェクトで Cache Components を有効化し、アプリを機能単位で順に変換していきます。各機能の境界で確認を取りながら進めるため、スコープをコントロールできます。動作モードは以下のいずれかです：

• Incremental：最初にすべてのルートを検証対象外にする単一の機械的 PR を作成し、その後の PR で段階的に機能を出荷する
• Direct：すべてのルートをその場で採用する（1 ブランチで完結）

各機能のループは同じです：Skill が actionable error を読み、該当エラーのドキュメントを取得し、その修正をルートに適用し、next-dev-loop を通してブラウザを操作して静的 shell が正しいコンテンツをレンダリングすることを確認します。

インストール例：

terminal npx skills add vercel/next.js --skill next-cache-components-adoption

エージェントへの促し文（例）：

Adopt Cache Components in this project using the next-cache-components-adoption skill.

（例）Claude が Cache Components をオンにし、ルートを機能単位で採用していく様子。

next-cache-components-optimizer

next-cache-components-optimizer Skill は、静的 shell に対する observe-fix-iterate ループを実行して、Instant Navigation に向けて Cache Components ルートを最適化します。ルートをより速く感じさせたい場合に使用します。働き方は次のモードがあります：

• Page-render mode：単一ページの静的レンダリング可能量を増やす（I/O をコンポーネントツリーの深い位置に押し込む、あるいは use cache でキャッシュする）
• Nav mode：ページ間のナビゲーションを即時にする。次のページに必要なサーバー側の作業はナビゲーションをブロックせずにストリームされる

Skill は各変更前後のスクリーンショットを next-dev-loop を通して記録します。変更前後のスクリーンショットが同一なら変更をロールバックします。

インストール例：

terminal npx skills add vercel/next.js --skill next-cache-components-optimizer

エージェントへの促し文（例）：

Increase the static shell on /dashboard using the next-cache-components-optimizer skill.

（例）Claude がルートの静的 shell を成長させ、before/after のスクリーンショットで変更を検証する様子。

React インスペクションを備えた Agent Browser

Next.js 16.2 の実験的 next-browser は汎用の agent-browser CLI に統合されました。next-browser が行っていたことはすべて agent-browser に含まれており、Next.js 以外でも動作します。バージョン 0.27 では既存の DOM、コンソール、ネットワーク、Web Vitals へのアクセスに加え、React DevTools のインスペクションが追加されました。

エージェントは以下のコマンドで React を調べられます：

• react tree：コンポーネントツリーの一覧表示
• react inspect <fiberId>：単一コンポーネントを検査
• react renders start / react renders stop：再レンダーのプロファイルを取る
• react suspense --only-dynamic --json：何がレンダリングを保持しているかを確認

next-dev-loop Skill は React DevTools を有効化して agent-browser を起動するため、検証時にこれらのコマンドが利用可能になります。

インストール／アップグレード：

npm install -g agent-browser@^0.27

起動時に React コマンドを使うには --enable react-devtools が必要です。

Actionable errors

Cache Components が有効な場合、サーバーでの await の使用は選択です。Instant Insights はその選択肢をエラーとして提示し、次の3つの具体的な修正を示します：

• データを <Suspense> 境界の背後でストリーミングする
• "use cache" でキャッシュする
• export const instant = false でルートをブロックする

これらはプロダクト的な判断でトレードオフがあります。正しい選択をするには文脈が必要で、あなた自身またはコーディングエージェントが判断を下すことになります。

Instant Insights の修正プロンプト

Instant Insight はラベル付きの修正候補を提示し、「Copy as prompt」ボタンで選択した修正をエージェントに貼り付け可能なプロンプトとしてパッケージ化します。プロンプトは、失敗コードの特定、対応するエラーページの読み取り、標準的パターンの適用、next-dev-loop Skill を使ったランタイムでの検証手順をエージェントに案内します。

例えば、ページ内の uncached な fetch() 呼び出しに当たったとします。Stream（ストリーム）の修正を選んで「Copy as prompt」を押すと、次のようなプロンプトが得られます。

The prompt your agent can use:

1. Make sure you can drive a browser before you start. The fix isn't verified until you've reloaded the route and looked at what renders. If you don't already have browser tooling set up, install the next-dev-loop skill (https://github.com/vercel/next.js/tree/canary/skills/next-dev-loop) first.
2. Identify the failing code in the error block below. It may be a data-access call, a hook call, a metadata or viewport export, or a component. Keep the fix focused on that code. If you think a related refactor (a sibling component, a shared layout, a wrapping boundary) would make the result meaningfully better, name it and check with the user before doing it — don't expand the scope silently.
3. Read the rule docs at https://nextjs.org/docs/messages/blocking-prerender-dynamic for the full Insight explanation, then read the fix section at https://nextjs.org/docs/messages/blocking-prerender-dynamic#wrap-in-or-move-into-suspense. Pick the pattern under "### Patterns" that matches the failing code, then read "### Gotchas" before editing — they list constraints that are easy to miss. Use the canonical imports and code shape from the page; don't improvise variations.
4. Apply the chosen pattern to the code identified in step 2. Don't narrate the change with new comments — the code should explain itself. Only leave a comment when the why isn't clear (e.g. a deliberate Block with a reason).
5. Verify the fix at runtime. The Insight clearing in the dev overlay confirms the build is happy, but not what actually renders. Reload the route in a browser and confirm the static shell still paints first and any new <Suspense> fallback resolves to its real content.
6. Check the shell isn't empty. A <Suspense> boundary placed too high (around the whole page body, or with fallback={null}) can leave the build reporting a shell while the shell itself contains nothing and everything streams. If that's what you see, pull the boundary down closer to the actual dynamic read.
7. If the fix touched shared code (a layout, a wrapper, a sidebar), re-check the sibling routes too — a shell-level change can fix one route and break another. A before/after capture of the affected routes is a useful sanity check: the visible UI may look the same (the fix often just changes what's in the shell vs streamed), but if anything regressed visually, you'll see it.

返信する際は、ユーザーに対して「何を変更し、なぜそうしたのか」を平易な日本語で要約してください。このチェックリストをそのままヘッダーや "Verification"／"Scope" といったラベル付きの箇条書きで返す必要はありません — それらは内部の手順です。

エラー例

エラー種別: Blocking Route

エラーメッセージ:

Route "/products/[slug]": Next.js encountered uncached data during prerendering or a navigation. `fetch(...)` or `connection()` accessed outside of `<Suspense>` prevents the route from being prerendered or the navigation from being instant, leading to a slower user experience.
at ProductPage (app/products/[slug]/page.tsx:52:32)

コードフレーム:

50 | props: PageProps<"/products/[slug]">,
51 | ) {
> 52 |   const featured = await fetch(`/api/products/${slug}`);
   |                                  ^
53 |
54 |   return (
55 |     <div className="space-y-4">

Next.js バージョン: 16.3.0 (Turbopack)

構造化されたコンソール出力

同じ修正メニューは next dev の実行中にターミナルにも表示され、next build がプリレンダを止めるようなエラーを出した場合にも emit されます。そのため、next build、CI ログ、または開発オーバーレイが利用できないターミナルセッションからエラーを読み取るエージェントでも、同じラベル付き修正と対応するルール別ドキュメントへのリンクが得られます。