Next.js DevTools MCP
OfficialNext.js development tools for coding agents: runtime diagnostics, upgrades, docs, and Cache Components migration.
Add to your client
Copy the config for your MCP client and paste it into its config file.
npx add-mcp next-devtools-mcp@latestPaste into ~/Library/Application Support/Claude/claude_desktop_config.json
{
"mcpServers": {
"next-js-devtools-mcp": {
"command": "npx",
"args": [
"-y",
"next-devtools-mcp@latest"
]
}
}
}Step-by-step guides: Add to Claude Desktop · Add to Cursor · Add to Windsurf
Before you start
- Node.js v20.19 or a newer latest maintenance LTS version
- npm or pnpm
- Next.js 16+ with a running dev server (npm run dev) for runtime diagnostics tools (nextjs_index, nextjs_call); other tools work without a running server
About Next.js DevTools MCP
An official Vercel MCP server that equips coding agents with Next.js development tools. It bridges your agent to a running Next.js 16+ dev server's built-in MCP endpoint for runtime diagnostics (errors, routes, logs, Server Actions), provides automated Next.js 16 upgrades and Cache Components migration, integrates Playwright browser testing, and exposes official Next.js documentation search plus a curated knowledge base. Works across Next.js versions, with the richest runtime features requiring Next.js 16+ and a running dev server.
Tools & capabilities (7)
initInitialize Next.js DevTools MCP context, document available tools, and establish a documentation-first requirement (use nextjs_docs for all Next.js queries). Optional project_path input. Recommended at the start of every session.
nextjs_docsSearch and retrieve official Next.js documentation via a two-step process: 'search' for docs by keyword to get paths, then 'get' to fetch full markdown content by path. Supports filtering by router type (app, pages, all).
browser_evalAutomate and test web apps using Playwright. Actions include start, navigate, click, type, fill_form, evaluate, screenshot, console_messages, drag, upload_file, close, and list_tools. Supports chrome, firefox, webkit, msedge, headless mode.
nextjs_indexDiscover all running Next.js 16+ dev servers on the machine and list the runtime diagnostic tools each exposes at its /_next/mcp endpoint (e.g. get_errors, get_logs, get_page_metadata, get_project_metadata, get_server_action_by_id). No parameters required.
nextjs_callExecute a specific MCP tool on a running Next.js dev server's /_next/mcp endpoint. Requires port and toolName; optional args object. Use nextjs_index first to discover servers and tools.
upgrade_nextjs_16Guide through upgrading Next.js to version 16 with automated codemod execution (requires clean git state). Handles async API changes, config migration, image defaults, parallel routes, deprecated API removals, and React 19 compatibility. Optional project_path input.
enable_cache_componentsComplete Cache Components setup, enablement, and migration for Next.js 16 with automated error detection and fixing. Runs pre-flight checks, enables config, starts the dev server with MCP, verifies routes, sets up Suspense/caching boundaries, and runs final build testing. Optional project_path input.
What this server can do
Next.js DevTools MCP provides tools for these capabilities — tap one to see every MCP server that does the same:
When to use it
- Query your running Next.js app for current build, runtime, and type errors directly from your coding agent
- Inspect application routes, page/component metadata, and dev server logs in real time
- Upgrade a Next.js app to version 16 with official codemods
- Migrate an app to Cache Components mode with automated error detection and fixes
- Search official Next.js documentation and a curated knowledge base for accurate, version-correct guidance
- Run Playwright browser tests to verify pages, interactions, and detect hydration/client-side errors
Security notes
Collects anonymous usage telemetry (tool names invoked, anonymous error messages, session metadata like OS/Node version). Project code, file contents, file paths, credentials, and tool arguments are NOT collected. Local telemetry files are written under ~/.next-devtools-mcp/. Disable telemetry by setting NEXT_TELEMETRY_DISABLED=1.
Next.js DevTools MCP FAQ
Do I need Next.js 16 to use this server?
No. The documentation, upgrade, Cache Components, and browser_eval tools work with any Next.js version. The runtime diagnostics tools (nextjs_index and nextjs_call) require Next.js 16+ with a running dev server, since MCP is enabled by default at /_next/mcp in Next.js 16+.
Should I call any tool first?
Yes. The README strongly recommends calling the init tool at the start of every Next.js session to establish proper context and a documentation-first approach. You can also configure your agent (e.g. via CLAUDE.md or .cursorrules) to call init automatically.
What data does it collect?
It collects anonymous telemetry: which tools are invoked, anonymous error messages, and session metadata (session ID, timestamps, OS, Node version). It does NOT collect your code, file contents, file paths, credentials, or tool arguments. Set NEXT_TELEMETRY_DISABLED=1 to opt out.
I get a 'No server info found' error. What do I do?
Make sure your Next.js dev server is running (npm run dev). If you are on Next.js 15 or earlier, use the upgrade_nextjs_16 tool to upgrade to 16+, which enables the built-in MCP endpoint the runtime tools rely on.
Alternatives to Next.js DevTools MCP
Compare all alternatives →
Microsoft's official browser-automation MCP using Playwright's accessibility tree (no vision model).
Up-to-date, version-specific library documentation injected into your coding agent.
LSP-powered coding agent toolkit: semantic symbol search, references and structural edits.
Compare Next.js DevTools MCP with: