Next.js DevTools MCP

Next.js DevTools MCP

next-devtools-mcp เป็นเซิร์ฟเวอร์ Model Context Protocol (MCP) ที่เชื่อมต่อเอเจนต์เขียนโค้ดอย่าง Claude และ Cursor เข้ากับเซิร์ฟเวอร์ Next.js dev ที่กำลังทำงานอยู่

มันเป็น ตัวเชื่อมต่อแบบบาง มันค้นพบเซิร์ฟเวอร์ Next.js 16+ dev ที่กำลังทำงานและพร็อกซีปลายทาง MCP ในตัว (/_next/mcp) เพื่อให้เอเจนต์ได้รับข้อผิดพลาดรันไทม์ เส้นทาง และบันทึกแบบสด นอกจากนี้ยังมี เกตเวย์ สองตัวที่ชี้เอเจนต์ไปยังเครื่องมือที่พวกเขารันโดยตรง: เอกสารที่ตรงกับเวอร์ชันและ CLI agent-browser

[!NOTE] เอกสารและเวิร์กโฟลว์การย้ายข้อมูลไม่ได้อยู่ในเซิร์ฟเวอร์นี้อีกต่อไป Next.js รวมเอกสารของตัวเองไว้ที่ node_modules/next/dist/docs/ และเวิร์กโฟลว์การอัปเกรด / Cache Components ถูกแจกจ่ายเป็นสกิลของเอเจนต์ ดู การย้ายจาก 0.3.x

ความต้องการ

• Node.js v20.19 หรือเวอร์ชัน LTS ที่ใหม่กว่า
• npm หรือ pnpm
• Next.js 16+ พร้อมเซิร์ฟเวอร์ dev ที่กำลังทำงาน (สำหรับ nextjs_index / nextjs_call)

ติดตั้ง

ติดตั้งสำหรับเอเจนต์เขียนโค้ดทั้งหมดของคุณด้วย add-mcp:

npx add-mcp next-devtools-mcp@latest

เพิ่ม -y เพื่อข้ามพรอมต์และติดตั้งไปยังเอเจนต์ที่ตรวจพบทั้งหมด เพิ่ม -g เพื่อติดตั้งทั่วโลกในทุกโปรเจกต์

หรือเพิ่มการกำหนดค่าไปยังไคลเอนต์ MCP ของคุณด้วยตนเอง:

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

[!NOTE] next-devtools-mcp@latest ทำให้ไคลเอนต์ของคุณอยู่ในเวอร์ชันล่าสุด

การตั้งค่าเฉพาะไคลเอนต์

amp mcp add next-devtools -- npx next-devtools-mcp@latest

claude mcp add next-devtools npx next-devtools-mcp@latest

codex mcp add next-devtools -- npx next-devtools-mcp@latest

env = { SystemRoot="C:\\Windows", PROGRAMFILES="C:\\Program Files" }
startup_timeout_ms = 20_000

# Project
gemini mcp add next-devtools npx next-devtools-mcp@latest

# Global
gemini mcp add -s user next-devtools npx next-devtools-mcp@latest

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

code --add-mcp '{"name":"next-devtools","command":"npx","args":["-y","next-devtools-mcp@latest"]}'

เริ่มต้นอย่างรวดเร็ว

เริ่มเซิร์ฟเวอร์ Next.js dev ของคุณ:

npm run dev

Next.js 16+ เปิดใช้งานปลายทาง MCP โดยค่าเริ่มต้นที่ http://localhost:3000/_next/mcp next-devtools-mcp ค้นพบและเชื่อมต่อโดยอัตโนมัติ — ไม่จำเป็นต้องกำหนดค่า

จากนั้นถามเอเจนต์ของคุณเกี่ยวกับแอปที่กำลังทำงาน:

Next Devtools, what errors are in my Next.js application?
Next Devtools, show me the structure of my routes
Next Devtools, what's in the development server logs?

เอเจนต์เรียก nextjs_index เพื่อค้นพบเซิร์ฟเวอร์ จากนั้น nextjs_call เพื่อสอบถามสถานะจริงของพวกมัน

เครื่องมือ

เกตเวย์ไม่ได้ทำงานเอง — พวกมันบอกเอเจนต์ว่าเอกสารอยู่ที่ไหนหรือวิธีการติดตั้ง/รัน CLI และเอเจนต์รันมันโดยตรง (เร็วกว่าการพร็อกซีผ่าน MCP)

{ "port": 3000, "toolName": "get_errors" }

การย้ายจาก 0.3.x

เริ่มตั้งแต่ 0.4.0, next-devtools-mcp เป็นตัวเชื่อมต่อแบบบาง

เปลี่ยนแปลง:

• nextjs_docs ไม่ดึงข้อมูลเอกสารผ่านเครือข่ายอีกต่อไป มันชี้เอเจนต์ไปยังเอกสารที่ Next.js รวมไว้ที่ node_modules/next/dist/docs/ (หรือแนะนำให้อัปเกรด) ทรัพยากร nextjs-docs://llms-index ถูกลบออก

ลบออก:

• เครื่องมือ init — มันเพียงบังคับใช้เวิร์กโฟลว์การดึงข้อมูลเอกสารแบบเก่า
• เครื่องมือ upgrade_nextjs_16 และ enable_cache_components และพรอมต์ของพวกมัน — ตอนนี้แจกจ่ายเป็นสกิลของเอเจนต์
• ทรัพยากร cache-components://, nextjs16:// และ nextjs-fundamentals:// ทั้งหมด — ถูกแทนที่ด้วยเอกสารที่รวมมา

สิ่งที่เหลืออยู่: nextjs_index, nextjs_call, nextjs_docs และ browser_eval

ความเป็นส่วนตัวและการวัดและส่งข้อมูลทางไกล

next-devtools-mcp เก็บรวบรวมข้อมูลการวัดและส่งข้อมูลทางไกลการใช้งานแบบไม่ระบุตัวตนเพื่อปรับปรุงเครื่องมือ:

• การใช้งานเครื่องมือ — เครื่องมือ MCP ใดที่ถูกเรียกใช้ (เช่น nextjs_index, nextjs_call)
• เหตุการณ์ข้อผิดพลาด — ข้อความแสดงข้อผิดพลาดแบบไม่ระบุตัวตนเมื่อเครื่องมือล้มเหลว
• ข้อมูลเมตาของเซสชัน — ID เซสชัน, การประทับเวลา, สภาพแวดล้อมพื้นฐาน (OS, เวอร์ชัน Node.js)

ไม่เก็บรวบรวม: โค้ดของคุณ, เนื้อหาหรือเส้นทางของไฟล์, ข้อมูลส่วนบุคคล, ข้อมูลประจำตัว หรืออาร์กิวเมนต์ของเครื่องมือ (เฉพาะชื่อเครื่องมือ)

ไฟล์ในเครื่องอยู่ภายใต้ ~/.next-devtools-mcp/ (telemetry-id แบบไม่ระบุตัวตน, telemetry-salt และบันทึกดีบัก mcp.log)

ปฏิเสธ โดยการตั้งค่าตัวแปรสภาพแวดล้อม (เพิ่มไปยัง ~/.zshrc / ~/.bashrc เพื่อให้คงอยู่):

export NEXT_TELEMETRY_DISABLED=1

ลบข้อมูลการวัดและส่งข้อมูลทางไกลในเครื่องได้ตลอดเวลา:

rm -rf ~/.next-devtools-mcp

การแก้ไขปัญหา

ERR_MODULE_NOT_FOUND อ้างอิง next-devtools-mcp/dist — ล้างแคช npx ของคุณและรีสตาร์ทไคลเอนต์ MCP ของคุณ เซิร์ฟเวอร์จะติดตั้งใหม่

[error] No server info found — nextjs_index / nextjs_call ต้องการเซิร์ฟเวอร์ Next.js 16+ dev ที่กำลังทำงาน:

1. เริ่มมัน: npm run dev
2. ยืนยัน Next.js 16+ (ปลายทาง /_next/mcp มีอยู่ที่นั่นเท่านั้น)
3. ตรวจสอบว่ามันเริ่มต้นโดยไม่มีข้อผิดพลาด

browser_eval และ nextjs_docs ทำงานโดยไม่ต้องมีเซิร์ฟเวอร์ dev

การพัฒนาในเครื่อง

git clone https://github.com/vercel/next-devtools-mcp.git
cd next-devtools-mcp
pnpm install
pnpm build

ชี้ไคลเอนต์ MCP ของคุณไปยังบิลด์ในเครื่อง:

{
  "mcpServers": {
    "next-devtools": {
      "command": "node",
      "args": ["/absolute/path/to/next-devtools-mcp/dist/index.js"]
    }
  }
}

หรือด้วย Codex:

codex mcp add next-devtools-local -- node dist/index.js

ดู เอกสาร Next.js MCP สำหรับวิธีการทำงานของ MCP กับ Next.js และเอเจนต์เขียนโค้ด

ใบอนุญาต

MIT