MCP

Next.js DevTools MCP:先發現本機 16+ dev server

適合要讓代理看到 Next.js 16+ 開發伺服器執行時錯誤、路由和日誌的人;須先跑 dev server,第一次只呼叫 nextjs_index。

官方來源 · vercel/next-devtools-mcp

安裝

npx add-mcp next-devtools-mcp@latest

適合誰

適合正在跑 Next.js 16+ 開發伺服器、想讓編碼代理(證據舉例 Claude、Cursor)看到即時執行時錯誤、路由和日誌的人。證據寫明:next-devtools-mcp 是薄連接器,發現本機 Next.js 16+ dev server,並代理其內建 MCP 端點 /_next/mcp。

你必須已有 Node.js v20.19 或更新的 LTS,以及 npm 或 pnpm。nextjs_index / nextjs_call 還要求開發伺服器正在執行。沒有跑起來的 Next 16+ 行程,就不要指望執行時工具。

文件與遷移工作流程已不在這台伺服器裡:文件在 node_modules/next/dist/docs/,升級 / Cache Components 以 agent skills 分發。

3 分鐘完成第一次嘗試

走頁面給出的安裝命令(不要同時把手動 JSON 當第二條主路徑):

npx add-mcp next-devtools-mcp@latest

加 -y 可跳過提示並裝到所有偵測到的代理;加 -g 可跨專案全域安裝。等價的用戶端設定是 npx -y next-devtools-mcp@latest,僅作對照,第一次按 add-mcp 走。

前置條件:本機已有 Next.js 16+ 專案,且 next dev 已在跑。這次會發現本機開發伺服器並讀取執行時資訊,不是無網路、無本機專案的沙箱。

設定位置:由 add-mcp 寫入已偵測到的 MCP 用戶端;或手動寫在用戶端的 mcpServers.next-devtools。

低風險第一次呼叫:先呼叫 nextjs_index,發現正在執行的 dev server 並列出各自的執行時 MCP 工具。不要先 nextjs_call 去觸發 Server Actions。nextjs_docs 與 browser_eval 是閘道,不是幹活的 worker。

成功訊號:nextjs_index 列出至少一台正在跑的 Next.js 16+ 伺服器及其執行時工具。若清單為空,先把 dev server 拉起來,不要改去瀏覽器自動化。

使用案例

案例 1:確認代理能不能看見目前 dev server。呼叫 nextjs_index。證據保證它發現執行中的伺服器並列出每台的執行時 MCP 工具,沒有寫連接埠掃描範圍或多專案選擇參數。因此能確認的是:你看到目前被發現的那幾台。

案例 2:讀取某一台已發現伺服器上的錯誤、路由或日誌。在 nextjs_index 之後呼叫 nextjs_call。證據寫明可呼叫的執行時能力包括 errors、routes、logs、Server Actions。前三項偏觀察;Server Actions 可能改應用狀態。第一次只取 errors/routes/logs,不要先調 Server Actions。nextjs_docs 只是把代理指到版本對應的 node_modules/next/dist/docs/。

使用邊界

這是代理,不是完整 Next 文件站,也不是瀏覽器自動化本體。browser_eval 只指向 agent-browser CLI。文件與遷移不再住在本伺服器。執行時工具依賴 Next.js 16+ 且 dev server 在跑。證據沒有寫 nextjs_call 的參數欄位,也沒有 undo Server Actions 的路徑。不要把唯讀日誌查詢和觸發 Server Actions 當成同一風險。