Next.js 16 新特性：如何启用 MCP 与 AI 助手协作 🤖🤖🤖

最近在使用 NestJs 和 NextJs 在做一个协同文档 DocFlow，如果感兴趣，欢迎 star，有任何疑问，欢迎加我微信进行咨询 yunmz777

什么是 MCP？

MCP 是一种协议，允许 AI 助手通过标准化接口访问应用的内部状态、路由、组件层级、错误日志等信息，从而提供更精准的代码建议、错误诊断和结构优化建议。

Next.js 16 内置了 MCP 服务器，并提供了一个名为 next-devtools-mcp 的外部包，进一步增强了与 AI 助手的集成能力。

在 next.config.js 中添加以下配置：

javascript 复制代码

const nextConfig = {
  experimental: {
    mcpServer: true,
  },
};
export default nextConfig;

然后启动开发服务器：

bash 复制代码

npm run dev

默认情况下，MCP 服务器会在 http://localhost:3000/_next/mcp 路径上提供服务。

如果你希望 AI 助手访问更丰富的开发工具和文档，可以配置 next-devtools-mcp：

在项目根目录下创建 .mcp.json 文件，内容如下：

json 复制代码

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

然后启动开发服务器：

bash 复制代码

npm run dev

next-devtools-mcp 提供了以下功能：

MCP 使 AI 助手能够：

例如，你可以在 AI 助手中输入以下提示：

vbnet 复制代码

Next Devtools，帮我将 Next.js 应用升级到版本 16。

AI 助手将自动分析你的项目，提供升级建议，并执行必要的迁移步骤。