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"
  }
}