Set up Next.js DevTools MCP

Next.js DevTools MCP connects a coding agent to the built-in /_next/mcp endpoint of a locally running Next.js 16 dev server. Setup takes just a few minutes and requires no account.

Check requirements

The server requires Node.js 20.19 or newer and a project on Next.js 16 or later. Older Next.js versions don't expose a /_next/mcp endpoint, so the runtime tools won't work there; an upgrade can be triggered later through the agent itself.

Add the server to .mcp.json

Create or extend a .mcp.json file at the project root with the following content:

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

To set up the server automatically across all detected coding agents instead, run npx add-mcp next-devtools-mcp@latest.

Start the dev server and connect

Start the usual Next.js dev server, for example with npm run dev, pnpm dev, yarn dev, or bun dev. next-devtools-mcp automatically discovers the running process and connects to its /_next/mcp endpoint; manually configuring a port or URL is normally not necessary.

Work with the agent

Once connected, the agent can directly answer questions like "What errors are currently in my application?" or "Show me all routes in my App Router," since it accesses live errors, logs, and route/page metadata through the server's tools. For upgrades, a simple request like "Help me upgrade to Next.js 16" is enough — per the documentation, the agent uses the official upgrade codemod and walks through breaking changes.

If the connection fails

If the server won't connect, first check the installed Next.js version (16 or newer), verify the .mcp.json configuration, restart the dev server if it was already running before the MCP setup, and make sure the coding agent has actually loaded the MCP configuration.