Next.js DevTools MCP — Сценарии использования, Установка & Живое демо

Name: Next.js DevTools MCP Server
Author: vercel

Зачем использовать

Ключевые функции

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

Живое демо

Как выглядит на практике

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 использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

VS Code → Cline → MCP Servers → Edit

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

Щёлкните значок MCP Servers на боковой панели Cline, затем "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 использует массив объектов серверов, а не map.

~/.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

Поток

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
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
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

Поток

Discover the server

Run nextjs_index to find my local Next dev servers and list the diagnostic tools they expose.✓ Скопировано

→ 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?✓ Скопировано

→ 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.✓ Скопировано

→ 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.

Поток

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

Поток

Navigate and capture

Use browser_eval to open http://localhost:3000/pricing. Screenshot it and capture any console errors.✓ Скопировано

→ Screenshot + console summary
Click through critical path

Click 'Select Pro plan', verify the checkout modal opens with the right price. Screenshot each step.✓ Скопировано

→ Pass/fail per step
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 — эффект x10

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
Токенов на вызов: 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 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

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills