模型上下文协议 (MCP) 是一项开放标准，它允许 AI 代理和编程助手通过标准化接口与您的应用程序进行交互。
Next.js 16+ 包含 MCP 支持，使编程代理能够实时访问您应用程序的内部。要使用此功能，请安装 next-devtools-mcp 包。
要求： Next.js 16 或更高版本
在项目根目录的 .mcp.json 文件中添加 next-devtools-mcp：
{
"mcpServers": {
"next-devtools": {
"command": "npx",
"args": ["-y", "next-devtools-mcp@latest"]
}
}
}就是这样！当您启动开发服务器时，next-devtools-mcp 将自动发现并连接到您正在运行的 Next.js 实例。
有关更多配置选项，请参阅 next-devtools-mcp 存储库。
next-devtools-mcp 为编程代理提供了一系列不断增长的功能：
注意： Next.js 团队正在积极扩展这些功能。新的工具和特性会定期添加，以改善代理开发体验。
npm run dev您的编程代理将通过 next-devtools-mcp 自动连接到正在运行的 Next.js 实例
在浏览器中打开您的应用程序以查看页面
查询您的代理以获取见解和诊断信息（参见下面的示例）
通过 next-devtools-mcp，代理可以使用以下工具：
get_errors：从您的开发服务器中检索当前的构建错误、运行时错误和类型错误get_logs：获取包含浏览器控制台日志和服务器输出的开发日志文件的路径get_page_metadata：获取有关特定页面的元数据，包括路由、组件和渲染信息get_project_metadata：检索项目结构、配置和开发服务器 URLget_server_action_by_id：通过 ID 查找 Server Actions，以找到源文件和函数名称兼容 MCP 的编程代理可以自动发现并连接到您的 Next.js 开发服务器，从而为它们提供丰富的项目上下文。
代理可以：
实时询问您的代理有关错误的信息：
User: "What errors are currently in my application?"代理将：
next-devtools-mcp 查询您正在运行的 Next.js 应用程序> fix errors on the page
⏺ I'll help you fix the errors on the page. Let me first check what errors exist by looking at the
current state of the project.
⏺ next-devtools - nextjs_runtime (MCP)(action: "discover_servers")
⏺ next-devtools - nextjs_runtime (MCP)(action: "call_tool", toolName: "get_errors")
⏺ I found a hydration error on the /about page. The error shows that the server is rendering
"server" but the client is rendering "client", causing a mismatch. Let me create a todo list and fix
this issue.
⏺ Perfect! Now let me check for errors on the page. 01:14 PM claude-sonnet-4-5-20250929
⏺ next-devtools - nextjs_runtime (MCP)(action: "call_tool", toolName: "get_errors")
⎿ {
"success": true,
"port": 3000,
"toolName": "get_errors",
"result": {
"content": [
{
"type": "text",
"text": "# Found errors in 1 browser session(s)\n\n## Session: /about\n\n**1 error(s)
found**\n\n### Runtime Errors\n\n#### Error 1 (Type: recoverable)\n\n**Error**: Hydration failed获得 Next.js 概念和迁移的帮助：
User: "Help me upgrade my Next.js app to version 16"代理将分析您当前的版本，引导您通过 codemods 进行自动化迁移，并提供处理重大更改的分步说明。
提出概念性问题：
User: "When should I use 'use client' in App Router?"代理将查询 Next.js 知识库，并提供有文档支持的解释以及您代码库中的示例。
Next.js 16+ 包含一个内置的 MCP 端点 /_next/mcp，它在您的开发服务器中运行。next-devtools-mcp 包会自动发现并与这些端点通信，从而使其能够：
这种架构将代理接口与内部实现解耦，使 next-devtools-mcp 能够在不同的 Next.js 项目中无缝工作。
next-devtools-mcp 是否已在您的 .mcp.json 中配置npm run dev