Next.js官方发布了自己的MCP，包含自动化调试、项目结构感知、知识库检索在内的诸多功能。
我们知道，AI编程目前在Web领域最是能够大展拳脚。
而Next.js或许是我们使用AI氛围Web编码最多的一个框架。
Tips： Next.js 是一个基于 React 的现代 Web 框架，用于构建高性能、可扩展的全栈应用。是现代 Web 应用最流行的框架之一。
next-devtools-mcp，与 Next.js 16 一起推出（感觉好快啊，上一次听到还是15。）
这个MCP旨在增强你的代理在这个框架下的开发能力。
next-devtools-mcp 的能力蛮多。
集成Playwright MCP、上下文方面关于日志报错，了解整体项目结构。
还可以查询Next.js 文档和最佳实践、升级等等：
从 Next.js 16 开始，浏览器和服务器日志都将通过 next-devtools-mcp 捕获和访问，允许你直接在代理中从两端查询和查看日志
Tips： Next.js16+ 包括一个内置的MCP端点，位于/_next/mcp，可在开发服务器中运行。所以他能做到这一点。
一个框架原生支持了，挺6的。
要使用这个mcp。大概的流程是先确保你把你自己那个项目跑起来。然后安装好这个mcp，你就可以使用。
看看这个MCP的详细情况
1. 我们可以看一下它的工具。
主要是分为解决当前的错误。这些工具可以让代理（AI 助手）直接从正在运行的 Next.js 应用中获取错误、日志和页面信息，从而实现自动诊断与修复。
其中还有一个包含检索项目结构的，感觉也会比较有用。
2. 那么，代理使用这个 MCP 有哪些好处呢？
一个是把新功能加到对的位置，另外一个是实时的状态检查，还有了解整个页面布局，最后是：生成准确的代码，避免幻觉。
总的来说，有这些好处，一个字：还是“装”吧。
怎么向这个MCP提问？
实时向你的代理询问错误：
User: "What errors are currently in my application?"
代理将：
- 通过
next-devtools-mcp查询正在运行的 Next.js 应用程序 - 检索当前生成错误、运行时错误和类型错误
- 分析错误并提供可作的修复
执行过程：
执行过程的解释如下：
升级和最佳实践
获取有关 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 知识库，并提供文档支持的解释以及代码库中的示例。
其中它可以查询的知识库就包括这么一些：
另外，这个mcp还可以让你直接与多个 Next.js 项目对话和调试，不只是仅仅一个。
此MCP原理如下：
如果你运行失败的话，考虑这些原因：
安装方式：https://github.com/vercel/next-devtools-mcp
指南：https://nextjs.org/docs/app/guides/mcp#development-workflow
ONE MORE THING
AI 不知道 Next 16 和 cacheComponents
所以你应该尝试一下：next-devtools-mcp
学习最新Nexi.js实践？ 这位博主经常发布相关的内容：
另外，新的—— React Native Godot，可以让你创建应用程序、游戏：https://github.com/borndotcom/react-native-godot
不了解MCP、安装报错解决教程、哪些MCP有用？后台回复：mcp
🌟 知音难求，自我修炼亦艰，抓住前沿技术的机遇，与我们一起成为创新的超级个体（把握AIGC时代的个人力量）。
点这里👇关注我，记得标星哦～