Next.js Devtools MCP adalah server Model Context Protocol resmi dari Vercel
yang menyambungkan AI coding assistant seperti [Claude Code](https://claude.com/product/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](https://github.com/vercel/next-devtools-mcp),
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](https://github.com/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:

```bash
node -v
```

### 2. Pasang Lewat Perintah CLI Claude Code

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

```bash
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:

```json
{
  "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:

```bash
npx add-mcp next-devtools-mcp@latest
```

### 4. Jalankan Dev Server Seperti Biasa

```bash
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](https://modelcontextprotocol.io/introduction)

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

| Tool | Fungsi |
| --- | --- |
| `nextjs_index` | Menemukan dev server Next.js yang sedang berjalan & tool yang tersedia |
| `nextjs_call` | Menjalankan tool runtime seperti membaca error, route, atau log |
| `nextjs_docs` | Gerbang ke dokumentasi resmi versi-akurat |
| `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](/blog/cara-upgrade-nextjs-15-ke-16-langkah-demi-langkah)),
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](/blog/cara-upgrade-nextjs-15-ke-16-langkah-demi-langkah). Kalau butuh
  bantuan migrasi atau setup workflow AI-assisted development untuk proyek
  Next.js, lihat [layanan web development](/layanan) yang ditawarkan.