Cara Pakai Next.js Devtools MCP untuk AI

Next.js Devtools MCP adalah server Model Context Protocol resmi dari Vercel yang menyambungkan AI coding assistant seperti Claude Code atau Cursor langsung ke dev server Next.js 16 yang sedang berjalan, sehingga agent bisa membaca error runtime, daftar route, dan log tanpa manusia perlu menyalin potongan terminal secara manual.

Ringkasan cepat:

1. Next.js Devtools MCP adalah server Model Context Protocol resmi dari Vercel yang menyambungkan AI coding assistant ke dev server Next.js 16 yang sedang berjalan, memberi akses ke error runtime, daftar route, dan log — bukan sekadar dokumentasi statis.
2. Tool ini hanya berfungsi di Next.js 16 ke atas, karena bergantung pada endpoint /_next/mcp yang tertanam di dev server versi tersebut; proyek yang masih di Next.js 15 perlu upgrade dulu.
3. Pemasangan sepenuhnya di level AI assistant/editor lewat claude mcp add, konfigurasi JSON manual, atau npx add-mcp — tidak menyentuh kode aplikasi, next.config.ts, atau package.json proyek sama sekali.
4. Sejak versi 0.4.0 tidak ada lagi langkah inisialisasi manual; begitu npm run dev aktif, agent otomatis menemukan endpoint MCP tersebut.
5. Didukung banyak client MCP standar (Claude Code, Cursor, Codex, Gemini, Google Antigravity, Warp, VS Code/Copilot, Amp) lewat empat tool inti: nextjs_index, nextjs_call, nextjs_docs, dan browser_eval.

Apa Itu Next.js Devtools MCP?#

Next.js Devtools MCP adalah konektor tipis yang menemukan instance Next.js 16 ke atas yang sedang berjalan di mesin lokal, lalu meneruskan (proxy) endpoint MCP bawaan yang sudah tertanam di dev server tersebut. Menurut dokumentasi resmi di repositori GitHub Vercel, tool ini memberi agent akses ke state internal, diagnostik, dan error dari dev server yang aktif — bukan sekadar membaca dokumentasi statis.

"next-devtools-mcp is a Model Context Protocol (MCP) server that connects coding agents like Claude and Cursor to your running Next.js dev server."

— README resmi vercel/next-devtools-mcp

Kenapa Ini Beda dari Copy-Paste Error ke Chat AI#

Cara lama meminta bantuan AI men-debug error Next.js biasanya berarti menyalin pesan error dari terminal, menempelkannya ke chat, lalu menjelaskan konteks tambahan secara manual. Next.js Devtools MCP menghilangkan langkah itu: agent bisa langsung memanggil tool nextjs_call untuk mengambil error, route, atau hasil resolusi Server Action terbaru dari dev server yang sedang berjalan, sehingga konteks yang didapat AI selalu sinkron dengan kondisi proyek saat itu juga.

Bagaimana Cara Memasang Next.js Devtools MCP?#

Pemasangan tidak menyentuh kode aplikasi sama sekali — semuanya konfigurasi di level AI assistant/editor, bukan di next.config.ts atau dependency package.json proyek.

1. Pastikan Node.js Versi yang Didukung#

Next.js Devtools MCP butuh Node.js v20.19 atau versi LTS terbaru di atasnya. Cek versi yang terpasang:

node -v

2. Pasang Lewat Perintah CLI Claude Code#

Untuk Claude Code, cara tercepat adalah lewat perintah mcp add:

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

Perintah ini otomatis menulis konfigurasi yang dibutuhkan tanpa perlu mengedit file manual.

3. Atau Tulis Konfigurasi MCP Secara Manual#

Kalau memakai editor/client MCP lain (Cursor, VS Code/Copilot, Warp, dsb.), tambahkan konfigurasi berikut ke file pengaturan MCP client tersebut:

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

Ada juga cara satu perintah yang mendeteksi dan memasang ke semua AI assistant yang terpasang sekaligus:

npx add-mcp next-devtools-mcp@latest

4. Jalankan Dev Server Seperti Biasa#

npm run dev

Sejak versi 0.4.0, tidak ada lagi tool inisialisasi terpisah yang perlu dipanggil manual — begitu dev server aktif, agent otomatis menemukan endpoint /_next/mcp dan bisa langsung memanggil tool nextjs_index untuk melihat kemampuan apa saja yang tersedia di server tersebut.

AI Assistant Apa Saja yang Sudah Didukung?#

Karena dibangun di atas protokol MCP standar (bukan API proprietary), Next.js Devtools MCP tidak terkunci ke satu vendor. Menurut dokumentasi resmi protokolnya sendiri:

"MCP (Model Context Protocol) is an open-source standard for connecting AI applications to external systems."

— Dokumentasi resmi Model Context Protocol

Client yang resmi didukung: Claude Code, Cursor, Codex, Gemini, Google Antigravity, Warp, VS Code/Copilot, dan Amp. Empat tool inti yang diekspos ke semua client tersebut adalah nextjs_index (menemukan server & tool yang tersedia), nextjs_call (menjalankan tool runtime seperti membaca error/route), nextjs_docs (gerbang ke dokumentasi resmi versi-akurat), dan browser_eval (otomasi browser lewat CLI agent-browser).

Situs ini sendiri masih berjalan di Next.js 15.5 (lihat artikel cara upgrade ke Next.js 16), jadi tool ini baru relevan dipasang setelah migrasi tuntas — endpoint /_next/mcp memang hanya tersedia di dev server Next.js 16 ke atas.

Ringkasan: Instalasi Tanpa Kode dan Syarat Next.js 16 sebagai Inti Next.js Devtools MCP#

• Next.js Devtools MCP menyambungkan AI coding assistant langsung ke dev server Next.js 16 yang berjalan, lewat protokol MCP standar, bukan API proprietary satu vendor.
• Pemasangan cukup lewat konfigurasi client (claude mcp add untuk Claude Code, atau JSON manual untuk client MCP lain) — tidak mengubah kode proyek sama sekali.
• Sejak versi 0.4.0 tidak perlu langkah inisialisasi manual; agent otomatis menemukan endpoint begitu npm run dev aktif.
• Tool ini butuh Next.js 16 ke atas. Proyek yang masih di Next.js 15 perlu upgrade lebih dulu — lihat panduan upgrade Next.js 15 ke Next.js 16. Kalau butuh bantuan migrasi atau setup workflow AI-assisted development untuk proyek Next.js, lihat layanan web development yang ditawarkan.