next-devtools

The Next.js DevTools MCP server provides runtime diagnostics and developer tooling for Next.js projects. It integrates with coding agents (such as Claude, Cursor, Codex, Gemini, and others) to query your running Next.js application, inspect routes, server logs, and other runtime state, and to surface Next.js official documentation and guidance. The server exposes tools like init (to initialize the proper Next.js context), nextjs_index (to examine index structures or resources), and nextjs_call (to query the running app via the Next.js runtime APIs). After starting a Next.js app with MCP enabled, you can interact with these tools through natural-language prompts that reference the context established by init and the app’s current state. This setup helps agents provide accurate, documentation-first responses about your Next.js project and its runtime behavior.

Prerequisites:\n- Node.js v20.19+ (or newer maintenance LTS)\n- npm or pnpm\n\nInstallation steps:\n1) Install the MCP server for all agents using npx:\nbash\nnpx add-mcp next-devtools-mcp@latest\n\nThis adds the MCP server to your project or workspace so your agents can connect to it. You can pass -g to install globally across projects, or -y to skip prompts.\n\n2) Manual configuration (optional): add the MCP server entry to your MCP client configuration to specify how to launch the server:\njson\n{\n "mcpServers": {\n "next-devtools": {\n "command": "npx",\n "args": ["-y", "next-devtools-mcp@latest"]\n }\n }\n}\n\nThis mirrors the default with npx and the latest version.\n\n3) Start using the server:\n- Ensure your Next.js dev server is running (e.g., npm run dev) and MCP is enabled by default in Next.js 16+.\n- Interact with the MCP-enabled prompts in your coding agents to initialize context and retrieve runtime diagnostics.\n\nPrerequisites recap: Node.js v20.19+, npm or pnpm installed, and access to npx.\n

Tips and common considerations:\n- When upgrading Next.js, keep next-devtools-mcp@latest to ensure compatibility with new runtime APIs.\n- Initialize context with the init tool at the start of each session to ensure the agent references official Next.js documentation for all queries.\n- If your Next.js app runs on a non-default port, ensure the MCP access points are updated accordingly in your agent configurations.\n- Some tooling integrations expose additional commands (e.g., nextjs_index, nextjs_call) behind the Init context; use the init flow to unlock these capabilities.\n- For large monorepos, you may prefer per-project MCP configuration entries rather than a global one to avoid cross-project conflicts.\n