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.

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.

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. 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#

• 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.