Next.js DevTools MCP — Anwendungsfälle, Installieren & Live-Demo

Name: Next.js DevTools MCP Server
Author: vercel

Warum nutzen

Hauptfunktionen

First-party — maintained by Vercel / Next.js team
nextjs_docs — authoritative doc search, no hallucinations
browser_eval — in-MCP Playwright for testing your app
nextjs_index / nextjs_call — talk to Next 16 dev-server diagnostics

Live-Demo

In der Praxis

vercel.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

~/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"
      ]
    }
  }
}

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

Cursor nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "vercel": {
      "command": "npx",
      "args": [
        "-y",
        "@vercel/next-devtools-mcp"
      ]
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

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

Continue nutzt ein Array von Serverobjekten statt einer Map.

~/.config/zed/settings.json

{
  "context_servers": {
    "vercel": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@vercel/next-devtools-mcp"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: Next.js DevTools

Upgrade a Next.js project to v16 with guided codemods

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

Wann einsetzen: You've been putting off the Next 16 upgrade. You want an agent to drive codemods and fix async API migrations.

Voraussetzungen

Next.js project on v14+ — Check package.json
Clean git working tree — git status shows clean — so you can revert if needed

Ablauf

Run the upgrade tool

Run upgrade_nextjs_16 on this project. Walk me through each codemod before applying.✓ Kopiert

→ List of planned changes with diffs to preview
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.✓ Kopiert

→ Build passes
Enable Cache Components

Run enable_cache_components. Fix any boundary errors it reports.✓ Kopiert

→ Cache components enabled, app runs

Ergebnis: A working Next 16 project with Cache Components, in one focused session instead of a scattered week.

Fallstricke

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

Kombinieren mit: git

Debug a running Next dev server via its diagnostic endpoints

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

Wann einsetzen: Your next dev is running but something is off (weird hydration, wrong render mode). Next 16+ exposes runtime tools via /_next/mcp.

Voraussetzungen

Next.js 16+ dev server running — npm run dev

Ablauf

Discover the server

Run nextjs_index to find my local Next dev servers and list the diagnostic tools they expose.✓ Kopiert

→ Port + tool list
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?✓ Kopiert

→ Render mode per route with explanation
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.✓ Kopiert

→ Render mode changes to partial after fix

Ergebnis: Insight into Next's rendering decisions without reading 20 blog posts.

Fallstricke

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

Wann einsetzen: You have a question about Next.js behavior. You don't want LLM hallucinations — you want a citation.

Ablauf

Search docs

Use nextjs_docs to find the official guidance on middleware vs route handlers for auth. Return matching sections.✓ Kopiert

→ Cited doc sections with URLs
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.✓ Kopiert

→ Grounded answer with URLs
Apply to my code

Walk through my current implementation in middleware.ts. Does it align with the docs' recommendations?✓ Kopiert

→ Concrete gap list

Ergebnis: Authoritative Next.js decisions backed by docs, not vibes.

Fallstricke

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

Wann einsetzen: You just made a change. You want a quick smoke test before committing.

Ablauf

Navigate and capture

Use browser_eval to open http://localhost:3000/pricing. Screenshot it and capture any console errors.✓ Kopiert

→ Screenshot + console summary
Click through critical path

Click 'Select Pro plan', verify the checkout modal opens with the right price. Screenshot each step.✓ Kopiert

→ Pass/fail per step
Report

Summarize: ok / broken / suspicious. If anything failed, paste the console error.✓ Kopiert

→ Ship-or-don't-ship verdict

Ergebnis: A quick sanity check embedded in your dev loop — no separate Playwright runner needed.

Fallstricke

browser_eval is Playwright-lite — not a replacement for full E2E suite — Use for quick checks; keep a real Playwright suite for release gates

Kombinieren mit: playwright

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

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.✓ Kopiert

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.✓ Kopiert

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.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen	Kosten
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

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: Free — local execution + docs search
Tokens pro Aufruf: Docs returns can be large; set limit on search
Kosten in €: Free
Tipp: Run init once per session so the agent knows available tools — saves random trial-and-error

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: None — local tool

Datenabfluss: Docs search hits vercel.com; browser_eval goes wherever you navigate; telemetry to vercel (opt-out via NEXT_TELEMETRY_DISABLED)

Fehlerbehebung

Häufige Fehler und Lösungen

nextjs_index finds no servers

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

Prüfen: 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'.

Alternativen

Next.js DevTools vs. andere

Alternative	Wann stattdessen	Kompromiss
Playwright MCP	You need full Playwright, not the lite browser_eval	More powerful but no Next.js-specific diagnostics or docs search
Cloud Run MCP	You deploy to GCP, not Vercel	Different hosting model; this MCP is Next.js DX-focused, not deploy-focused

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen