/ 目錄 / 演練場 / Next.js DevTools
← 全部伺服器 ↗ GitHub
● 官方 vercel ⚡ 即開即用

Next.js DevTools

作者 vercel · vercel/next-devtools-mcp

Next.js DevTools MCP — search official docs, drive the browser for E2E checks, diagnose running dev servers, and auto-upgrade to Next 16.

Official Vercel MCP focused on Next.js DX. Searches official Next.js docs, provides an in-process browser_eval for testing, discovers running next dev servers (v16+) and calls their built-in MCP endpoints, and runs codemods to upgrade to Next 16 + enable Cache Components.

▶ 觀看演示 📦 安裝 💡 使用場景

為什麼要用

核心特性

即時演示

實際使用效果

vercel.replay ▶ 就緒
0/0

安裝

選擇你的客戶端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

開啟 Claude Desktop → Settings → Developer → Edit Config。儲存後重啟應用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

Cursor 使用與 Claude Desktop 相同的 mcpServers 格式。專案級設定優先於全域。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

點擊 Cline 側欄中的 MCP Servers 圖示，然後選 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

格式與 Claude Desktop 相同。重啟 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "vercel",
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  ]
}

Continue 使用伺服器物件陣列，而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "vercel": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@vercel/next-devtools-mcp"
        ]
      }
    }
  }
}

加入 context_servers。Zed 儲存後熱重載。

claude mcp add vercel -- npx -y @vercel/next-devtools-mcp

一行命令搞定。用 claude mcp list 驗證，claude mcp remove 移除。

使用場景

實戰用法： Next.js DevTools

Upgrade a Next.js project to v16 with guided codemods

👤 Next.js engineers on v14/v15 ⏱ ~60 min advanced

何時使用： You've been putting off the Next 16 upgrade. You want an agent to drive codemods and fix async API migrations.

前置條件
  • Next.js project on v14+ — Check package.json
  • Clean git working tree — git status shows clean — so you can revert if needed
步驟
  1. Run the upgrade tool
    Run upgrade_nextjs_16 on this project. Walk me through each codemod before applying.✓ 已複製
    → List of planned changes with diffs to preview
  2. Fix async API call sites
    After codemods, build the project. For any errors from now-async cookies()/headers(), fix the call sites to use await.✓ 已複製
    → Build passes
  3. Enable Cache Components
    Run enable_cache_components. Fix any boundary errors it reports.✓ 已複製
    → Cache components enabled, app runs

結果： A working Next 16 project with Cache Components, in one focused session instead of a scattered week.

注意事項
  • Codemods can't fix custom-patterned async usage — Run the build after each codemod step; fix manually when the codemod tags 'REVIEW' comments
  • Third-party libs may not be ready for Next 16 — Check package compatibility before upgrading; pin any lib that breaks and file an issue upstream
搭配使用： git

Debug a running Next dev server via its diagnostic endpoints

👤 Next.js engineers on v16+ ⏱ ~20 min advanced

何時使用： Your next dev is running but something is off (weird hydration, wrong render mode). Next 16+ exposes runtime tools via /_next/mcp.

前置條件
  • Next.js 16+ dev server running — npm run dev
步驟
  1. Discover the server
    Run nextjs_index to find my local Next dev servers and list the diagnostic tools they expose.✓ 已複製
    → Port + tool list
  2. Call diagnostic tools
    Use nextjs_call on port <PORT> to get the route tree and render modes for /dashboard. Is it static, dynamic, or partial?✓ 已複製
    → Render mode per route with explanation
  3. Fix the bad render
    The /dashboard page uses cookies() making it fully dynamic when I wanted partial prerendering. Find the culprit import and refactor to isolate.✓ 已複製
    → Render mode changes to partial after fix

結果： Insight into Next's rendering decisions without reading 20 blog posts.

注意事項
  • Dev server diagnostics differ from prod build output — Always verify with next build — dev mode has different defaults

Get authoritative answers to Next.js questions

👤 Next.js devs at any level ⏱ ~10 min beginner

何時使用： You have a question about Next.js behavior. You don't want LLM hallucinations — you want a citation.

步驟
  1. Search docs
    Use nextjs_docs to find the official guidance on middleware vs route handlers for auth. Return matching sections.✓ 已複製
    → Cited doc sections with URLs
  2. Answer with citations
    Based only on those sections, which should I use for JWT validation in my Next 16 app, and why? Include doc URLs.✓ 已複製
    → Grounded answer with URLs
  3. Apply to my code
    Walk through my current implementation in middleware.ts. Does it align with the docs' recommendations?✓ 已複製
    → Concrete gap list

結果： Authoritative Next.js decisions backed by docs, not vibes.

注意事項
  • Docs lag behind the latest release for a few weeks post-launch — For bleeding-edge features, also check the Next.js RFC / blog posts

Run an E2E check on your Next.js app

👤 Next.js engineers ⏱ ~10 min intermediate

何時使用： You just made a change. You want a quick smoke test before committing.

步驟
  1. Navigate and capture
    Use browser_eval to open http://localhost:3000/pricing. Screenshot it and capture any console errors.✓ 已複製
    → Screenshot + console summary
  2. Click through critical path
    Click 'Select Pro plan', verify the checkout modal opens with the right price. Screenshot each step.✓ 已複製
    → Pass/fail per step
  3. Report
    Summarize: ok / broken / suspicious. If anything failed, paste the console error.✓ 已複製
    → Ship-or-don't-ship verdict

結果： A quick sanity check embedded in your dev loop — no separate Playwright runner needed.

注意事項
  • browser_eval is Playwright-lite — not a replacement for full E2E suite — Use for quick checks; keep a real Playwright suite for release gates
搭配使用： playwright

組合

與其他 MCP 搭配，撬動十倍槓桿

vercel + playwright

browser_eval for quick checks, Playwright for full regression suites

Smoke-test /pricing with browser_eval. If that passes, run the Playwright suite on the critical flows.✓ 已複製
vercel + git

Upgrade Next, commit at each step

Run upgrade_nextjs_16. After each codemod, commit the diff with a descriptive message so we can bisect if something breaks.✓ 已複製
vercel + sentry

Post-upgrade monitor

Deploy the Next 16 build to staging. Watch Sentry for 24h and flag any new errors introduced by async API migration.✓ 已複製

工具

此 MCP 暴露的能力

工具輸入參數何時呼叫成本
init First call in a new conversation free
nextjs_docs query Any Next.js factual question free
browser_eval actions (navigate, click, screenshot, etc.) Quick E2E tests of your dev server free (local browser)
nextjs_index Discover Next 16+ dev servers free
nextjs_call port, tool_name, args Invoke a Next 16+ runtime diagnostic free
upgrade_nextjs_16 project_path Upgrade path from v14/15 to v16 free
enable_cache_components project_path Turn on Cache Components in a v16 app free

成本與限制

運行它的成本

API 配額
Free — local execution + docs search
每次呼叫 Token 數
Docs returns can be large; set limit on search
費用
Free
提示
Run init once per session so the agent knows available tools — saves random trial-and-error

安全

權限、密鑰、影響範圍

憑證儲存： None — local tool
資料出站： Docs search hits vercel.com; browser_eval goes wherever you navigate; telemetry to vercel (opt-out via NEXT_TELEMETRY_DISABLED)

故障排查

常見錯誤與修復

nextjs_index finds no servers

Only Next.js 16+ dev servers expose /_next/mcp. Upgrade first, or use browser_eval for older versions.

驗證： curl http://localhost:3000/_next/mcp
browser_eval fails to launch

Playwright binaries missing. Run npx playwright install once.

Codemod left files in a half-migrated state

Revert via git, then run the codemods one at a time instead of all at once. Commit between each.

nextjs_docs returns irrelevant results

Add the Next.js major version to your query: 'app router middleware in Next 16' instead of just 'middleware'.

替代方案

Next.js DevTools 對比其他方案

替代方案何時用它替代權衡
Playwright MCPYou need full Playwright, not the lite browser_evalMore powerful but no Next.js-specific diagnostics or docs search
Cloud Run MCPYou deploy to GCP, not VercelDifferent hosting model; this MCP is Next.js DX-focused, not deploy-focused

更多

資源

📖 閱讀 GitHub 上的官方 README

🐙 查看未解決的 issue

🔍 瀏覽全部 400+ MCP 伺服器和 Skills