next-devtools-mcp

概述

next-devtools-mcp 是由 Vercel 创建的 MCP 服务器，为 Claude 和 Cursor 等 AI 编码助手提供全面的 Next.js 开发工具。它既提供运行中 Next.js 应用程序的运行时诊断功能，也提供开发自动化特性。该服务器提供访问 Next.js 文档、执行浏览器自动化和管理开发工作流的功能。它专门设计用于 Next.js 16+ 项目，但也与早期版本兼容。

试试问 AI

装完之后，这里有 7 个你可以让 AI 做的事：

• initinit(project_path?: string)

  Initialize Next.js DevTools MCP context and establish documentation requirements.

  试试:Initialize Next.js DevTools试试:Set up context for my Next.js project试试:Start working with my Next.js app
• nextjs_docsnextjs_docs(action: 'search'|'get', query?: string, path?: string, anchor?: string, routerType?: 'app'|'pages'|'all')

  Search and retrieve Next.js official documentation and knowledge base.

  试试:Search Next.js docs for metadata试试:Get documentation for generateStaticParams试试:Show me Next.js middleware documentation
• browser_evalbrowser_eval(action: string, browser?: string, headless?: boolean, ...)

  Automate and test web applications using Playwright browser automation.

  试试:Take a screenshot of my Next.js app试试:Check console errors on my application试试:Click the login button on my website
• nextjs_indexnextjs_index()

  Discover all running Next.js dev servers and list their available MCP tools.

  试试:What Next.js servers are running?试试:Show me available diagnostic tools试试:List all Next.js dev servers
• nextjs_callnextjs_call(port: number, toolName: string, args?: object)

  Execute a specific MCP tool on a running Next.js dev server.

  试试:Get errors from my Next.js app on port 3000试试:Show me the project metadata试试:Get logs from development server

可对比工具

安装

npx add-mcp next-devtools-mcp@latest

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

FAQ

如何初始化 Next.js DevTools MCP 服务器？

在每个 Next.js 开发会话开始时调用 `init` 工具，以建立适当的上下文和文档要求。

支持哪些 Next.js 版本？

该服务器适用于所有 Next.js 版本，但运行时诊断仅适用于 Next.js 16+ 项目。

如何通过 MCP 服务器访问 Next.js 文档？

使用 `nextjs_docs` 工具进行两步过程：首先按关键字搜索找到相关文档路径，然后通过路径获取完整内容。

next-devtools-mcp 对比