Takumi Nakamura (@nyatinte) 2025/8/27 #Nextjs_findy MCPで実現する AIエージェント駆動の Next.jsアプリデバッグ手法 

About Me GitHub: nyatinte X: nyatinte にゃちんてと読みます Takumi Nakamura (@nyatinte にゃちんて) 新卒フロントエンドエンジニア Next.js, TypeScript, AIが好き 気になっているNext.jsの機能はDynamic IO OSS ccexp (claude-code-explorer) ccusage Raycast Extension 

Next.js 難しい 仕様そのものの難しさ バージョン間差異の多さ アップデート頻度 3 

AIエージェントに デバッグさせましょう！ 4 

"実際に試すことができないので" "v14の情報から推測すると..." "申し訳ございません..." AIにNext.js v15のエラー解決をさせてみる 例: Next.js v15のparamsのPromise化 5 課題解決の精度が悪い ･ 本質的解決ではないケースも ログ見れない ドキュメント見れない GitHub見れない ブラウザ操作できない 

MCPを活用して AIエージェントが自律的に デバッグできないか？ 6 

エラー ナレッジベース 1. エラーを探索・検出してログ収集 Background dev server Playwright MCP 4. 問題の解決 3. 修正→再実行してログ収集 AIによるコード編集 Playwright MCP 2. エラー解決法を調査 Context7 MCP Deepwiki MCP GitHub MCP エラーナレッジ AIエージェント駆動デバッグの流れ AIが学び続け、 “人間も成長できる” 7 

Claude CodeではBackgroundで開発サーバーを起動(npm run dev)しておい て、出力されたログを見ることができる browserDebugIntoInTerminal でブラウザのログをターミナルに出力 tmuxの活用やログファイルの出力で他AIエージェントもできる これを利用して、Playwright MCPやBrowser use MCPなどを使い、自動テス ト実行 → エラーを発見・再現 開発サーバーからデバッグ情報が取得でき、AIエージェントに対するフィード バックを与えることができる 1. エラーを探索・検出してログ収集 8 

人間のエラー解決プロセスをそのまま模倣させる Next.jsのIssueを調査する → GitHub MCP Next.jsの最新ドキュメントを見に行く → Context7 MCP, Deepwiki MCP コミュニティブログを参考にする → WebSearch系 MCP Next.js MCP開発の動きもある https://github.com/vercel/next.js/pull/81770 Next.jsコミュニティの情報量の多さが強みになる 2. エラー解決法を調査 9 

MCPを活用した調査で、エラーの原因と解決策が明らかになる AIエージェントが自律的に修正できるように 3. 修正→再実行してログ収集 10 

MCPを活用した調査で、エラーの原因と解決策が明らかになる AIエージェントが自律的に修正できるように もし解決したら、｢エラーナレッジベース｣ に追加する → AIコーディングで不足する “人間の学び” を増やしつつ、 AI自身も強化する 11 3. 修正→再実行してログ収集 

エラーの原因・解決策・関連情報を体系的にまとめたドキュメント メリット プロジェクト全体として解決策を統一できる チーム全体に共有することができる 人間が学習できる！！！ AIエージェントがエラー発生時に必ず参照するようにプロンプトしておくと 👍 4. エラーナレッジベースの活用 12 

エラーナレッジベースの例 例: Next.js v15のparamsのPromise化 13 

Example 14 

エラー ナレッジベース 1. エラーを探索・検出してログ収集 Background dev server Playwright MCP 4. 問題の解決 3. 修正→再実行してログ収集 AIによるコード編集 Playwright MCP 2. エラー解決法を調査 Context7 MCP Deepwiki MCP GitHub MCP エラーナレッジ Thank you for listening! AIが学び続け、 “人間も成長できる” 15