Next Devtools MCP

• 缓存组件（12 个部分）：

  • cache-components://overview
  • cache-components://core-mechanics
  • cache-components://public-caches
  • cache-components://private-caches
  • cache-components://runtime-prefetching
  • cache-components://request-apis
  • cache-components://cache-invalidation
  • cache-components://advanced-patterns
  • cache-components://build-behavior
  • cache-components://error-patterns
  • cache-components://test-patterns
  • cache-components://reference

• Next.js 16 迁移：

  • nextjs16://migration/beta-to-stable
  • nextjs16://migration/examples

• Next.js 基础知识：

  • nextjs-fundamentals://use-client

• upgrade-nextjs-16 - 升级到 Next.js 16 的指南
• enable-cache-components - 迁移并为 Next.js 16 启用缓存组件模式

初始化 Next.js DevTools MCP 上下文并建立文档要求。

功能：

• 为处理 Next.js 的 AI 助手设置正确的上下文
• 建立在所有与 Next.js 相关的查询中使用 nextjs_docs 的要求
• 记录所有可用的 MCP 工具及其用例
• 提供使用 MCP 进行 Next.js 开发的最佳实践
• 包括示例工作流程和快速入门清单

使用时机：

• 在 Next.js 开发会话开始时
• 了解可用工具并建立正确的上下文
• 确保 Next.js 开发采用以文档为先的方法

输入：

• project_path（可选） - Next.js 项目的路径（默认为当前目录）

输出：

• 使用 MCP 工具进行 Next.js 开发的全面初始化上下文和指导

搜索并检索 Next.js 官方文档和知识库。

功能：

• 两步过程：1) 按关键字搜索文档以获取路径，2) 按路径获取完整的 Markdown 内容
• 使用官方 Next.js 文档搜索 API
• 提供对全面的 Next.js 指南、API 参考和最佳实践的访问
• 支持按路由器类型（应用路由器、页面路由器或两者）进行过滤

输入：

• action（必需） - 要执行的操作：search 用于查找文档，get 用于获取完整内容
• query（可选） - search 操作必需。关键字搜索查询（例如，'metadata'、'generateStaticParams'、'middleware'）
• path（可选） - get 操作必需。搜索结果中的文档路径（例如，'/docs/app/api-reference/functions/refresh'）
• anchor（可选） - get 操作可选。搜索结果中的锚点/部分（例如，'usage'）
• routerType（可选） - 仅适用于 search 操作。按以下选项过滤：app、pages 或 all（默认：all）

输出：

• 包含文档标题、路径、内容片段、部分和锚点的搜索结果
• 特定文档页面的完整 Markdown 内容

使用 Playwright 浏览器自动化来自动化和测试 Web 应用程序。

使用时机：

• 验证 Next.js 项目中的页面（特别是在升级或测试期间）
• 测试用户交互和流程
• 截取屏幕截图进行视觉验证
• 检测运行时错误、水合问题和客户端问题
• 捕获浏览器控制台错误和警告

重要提示： 对于 Next.js 项目，优先使用 nextjs_index 和 nextjs_call 工具，而不是浏览器控制台日志转发。仅在这些工具不可用时，将 browser_eval 的 console_messages 操作作为备用。

可用操作：

• start - 启动浏览器自动化（如果需要，自动安装）
• navigate - 导航到 URL
• click - 点击元素
• type - 在元素中输入文本
• fill_form - 一次填充多个表单字段
• evaluate - 在浏览器上下文中执行 JavaScript
• screenshot - 截取页面屏幕截图
• console_messages - 获取浏览器控制台消息
• close - 关闭浏览器
• drag - 执行拖放操作
• upload_file - 上传文件
• list_tools - 列出服务器上所有可用的浏览器自动化工具

输入：

• action（必需） - 要执行的操作
• browser（可选） - 要使用的浏览器：chrome、firefox、webkit、msedge（默认：chrome）
• headless（可选） - 以无头模式运行浏览器（默认：true）
• 特定操作的参数（详见工具描述）

输出：

• 包含操作结果、屏幕截图（Base64 编码）、控制台消息或错误信息的 JSON

发现所有正在运行的 Next.js 开发服务器，并列出它们可用的 MCP 工具。

此工具的作用：

自动发现你机器上所有正在运行的 Next.js 16+ 开发服务器，并列出每个服务器内置 MCP 端点 /_next/mcp 提供的运行时诊断工具。

无需参数 - 只需调用该工具，它将扫描服务器。

可用的 Next.js 运行时工具（因 Next.js 版本而异）：

• get_errors - 获取当前的构建、运行时和类型错误
• get_logs - 获取开发日志文件的路径（浏览器控制台 + 服务器输出）
• get_page_metadata - 查询应用程序路由、页面和组件元数据
• get_project_metadata - 获取项目结构、配置和开发服务器 URL
• get_server_action_by_id - 按 ID 查找服务器操作以找到源文件

要求：

• Next.js 16+（默认启用 MCP）
• 正在运行的开发服务器（npm run dev）

输出：

• 包含发现的服务器列表的 JSON，每个服务器包含：
  • 端口、PID、URL
  • 可用工具及其描述和输入模式

示例提示：

• "Next Devtools，有哪些服务器正在运行？"
• "Next Devtools，显示可用的诊断工具"

在正在运行的 Next.js 开发服务器上执行特定的 MCP 工具。

此工具的作用：

在 Next.js 16+ 开发服务器的内置 MCP 端点 /_next/mcp 上调用特定的运行时诊断工具。

输入参数：

• port（必需） - 开发服务器端口（首先使用 nextjs_index 发现）
• toolName（必需） - 要调用的 Next.js 工具的名称
• args（可选） - 工具的参数对象（仅在工具需要时提供）

要求：

• Next.js 16+（默认启用 MCP）
• 正在运行的开发服务器（npm run dev）
• 首先使用 nextjs_index 发现可用的服务器和工具

典型工作流程：

// 步骤 1：发现服务器和工具
// （首先调用 nextjs_index）

// 步骤 2：调用特定工具
{
  "port": 3000,
  "toolName": "get_errors"
  // args 是可选的，仅在工具需要参数时需要
}

输出：

• 包含工具执行结果的 JSON

使用此工具的示例提示：

• "Next Devtools，我的 Next.js 应用程序中有哪些错误？"
• "Next Devtools，显示我的应用程序路由"
• "Next Devtools，开发服务器日志中有什么内容？"
• "Next Devtools，查找 ID 为 xyz 的服务器操作"

通过自动执行 codemod 指导将 Next.js 升级到 16 版本。

功能：

• 自动运行官方 Next.js codemod（需要干净的 git 状态）
• 处理异步 API 更改（参数、搜索参数、cookie、标头）
• 迁移配置更改
• 更新图像默认值和优化
• 修复并行路由和动态段
• 处理弃用 API 的移除
• 提供 React 19 兼容性指导

输入：

• project_path（可选） - Next.js 项目的路径（默认为当前目录）

输出：

• 包含逐步升级指导的结构化 JSON

为 Next.js 16 完成缓存组件的设置、启用和迁移，并进行自动错误检测和修复。此工具用于将 Next.js 应用程序迁移到缓存组件模式。

功能：

• 预检检查（包管理器、Next.js 版本、配置）
• 启用缓存组件配置
• 启动启用 MCP 的开发服务器
• 自动路由验证和错误检测
• 通过智能边界设置（Suspense、缓存指令、静态参数）自动修复错误
• 最终验证和构建测试

输入：

• project_path（可选） - Next.js 项目的路径（默认为当前目录）

输出：

• 包含完整设置指导和分阶段说明的结构化 JSON

示例用法：

使用 Claude Code：

Next Devtools，帮助我为我的 Next.js 16 应用程序启用缓存组件

使用其他代理或编程方式：

{
  "tool": "enable_cache_components",
  "args": {
    "project_path": "/path/to/project"
  }
}