Next.js DevTools MCP

Next.js DevTools MCP

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

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

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

ข้อกำหนด

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

การติดตั้ง

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

npx add-mcp next-devtools-mcp@latest

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

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

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

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

การตั้งค่าเฉพาะ client

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 ของคุณ:

npm run dev

Next.js 16+ เปิดใช้งาน MCP endpoint ของตัวเองโดยค่าเริ่มต้นที่ 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

ความเป็นส่วนตัวและ Telemetry

next-devtools-mcp รวบรวม telemetry การใช้งานแบบไม่ระบุตัวตนเพื่อปรับปรุงเครื่องมือ:

• การใช้งานเครื่องมือ — เครื่องมือ 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

ลบข้อมูล telemetry ท้องถิ่นได้ทุกเมื่อ:

rm -rf ~/.next-devtools-mcp

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

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

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

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

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

การพัฒนาท้องถิ่น

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

ชี้ MCP client ของคุณไปยังบิลด์ท้องถิ่น:

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

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

ใบอนุญาต

MIT