Next.js DevTools MCP

Next.js DevTools MCP ist der offizielle Model-Context-Protocol-Server für das React-Framework Next.js, entwickelt und gepflegt vom Vercel-Team unter github.com/vercel/next-devtools-mcp. Laut der offiziellen Next.js-Dokumentation unter nextjs.org/docs/app/guides/mcp bringt Next.js ab Version 16 einen eingebauten MCP-Endpunkt unter /_next/mcp im laufenden Entwicklungsserver mit. Das npm-Paket next-devtools-mcp fungiert als schlanker Verbindungsserver: Es entdeckt automatisch laufende Next.js-16-Dev-Server auf verschiedenen Ports, leitet Werkzeugaufrufe an den jeweils passenden Endpunkt weiter und stellt einem MCP-fähigen Coding-Agenten dadurch Echtzeit-Einblick in den Zustand der Anwendung bereit, ohne dass Vercel selbst als Cloud-Anbieter im Spiel sein muss. Der Server ist damit klar vom bereits im Katalog vorhandenen Vercel MCP Server abgegrenzt: Jener verwaltet Deployments, Projekte und Web-Analytics-Daten auf der Vercel-Plattform, während Next.js DevTools MCP ausschließlich lokal mit dem gerade laufenden Entwicklungsprozess eines Next.js-Projekts spricht und keinerlei Vercel-Konto oder -Anmeldung voraussetzt.

Was der Server konkret liefert

Über die Werkzeuge get_errors, get_logs, get_page_metadata, get_project_metadata, get_routes, get_server_action_by_id, get_compilation_issues und compile_route bekommt ein Agent laut Dokumentation Zugriff auf aktuelle Build-, Laufzeit- und Typfehler, auf den Pfad zur Entwicklungs-Logdatei mit Browser-Konsolenausgaben, auf Metadaten einzelner Seiten und des Gesamtprojekts, auf eine vollständige, nach App- und Pages-Router gruppierte Routenliste sowie auf gezielte Nachschlagefunktionen für Server Actions. Die auf Turbopack beschränkten Werkzeuge get_compilation_issues und compile_route erlauben zusätzlich, Kompilierungsprobleme projektweit abzurufen oder eine einzelne Route gezielt vorab zu kompilieren, ohne dafür einen echten HTTP-Request auszulösen. Ergänzend zeigt ein Dokumentations-Gateway auf die exakt zur installierten Next.js-Version passende Doku, die im Paket node_modules/next/dist/docs/ mitgeliefert wird, sodass Erklärungen und generierter Code nicht gegen eine veraltete oder zu neue Version laufen. Für Browser-Tests bindet der Server laut README zusätzlich das separate Playwright-MCP-Projekt von Microsoft an.

Typische Anwendungsfälle

In der Praxis fragt ein Nutzer seinen Coding-Agenten beispielsweise "Welche Fehler stecken gerade in meiner Anwendung?", woraufhin der Agent über den MCP-Server den laufenden Dev-Server abfragt, Build-, Laufzeit- und Hydration-Fehler einsammelt und darauf aufbauend konkrete Korrekturen vorschlägt. Genauso lassen sich Upgrades anstoßen ("Hilf mir, auf Next.js 16 zu aktualisieren"), woraufhin der Agent laut Next.js-Dokumentation das offizielle Upgrade-Codemod npx @next/codemod@latest upgrade latest ausführt und Breaking Changes Schritt für Schritt erläutert, oder konzeptionelle Fragen wie "Wann sollte ich 'use client' im App Router einsetzen?" anhand der versionsgenauen, mitgelieferten Dokumentation beantworten. Dadurch kann ein Agent Vorschläge treffen, die tatsächlich zur bestehenden Projektstruktur und zur installierten Next.js-Version passen, statt auf veraltetem Trainingswissen zu beruhen.

Installation und Voraussetzungen

Laut README und offizieller Doku wird next-devtools-mcp in der .mcp.json-Datei eines Projekts eingetragen und über npx -y next-devtools-mcp@latest gestartet; alternativ installiert npx add-mcp next-devtools-mcp@latest den Server automatisch in alle erkannten Coding-Agenten. Vorausgesetzt werden Node.js ab Version 20.19 (aktuelle LTS-Reihe) sowie ein laufendes Next.js-16-Projekt für den Zugriff auf Laufzeitwerkzeuge; Dokumentations- und Discovery-Funktionen greifen bereits ohne laufenden Dev-Server. Der Transport erfolgt per stdio über den lokalen npx-Prozess, es gibt keinen von Vercel gehosteten Remote-Endpunkt für diesen Server.

Lizenz, Herkunft und Einordnung

Das Repository ist laut package.json auf npm MIT-lizenziert, wird über die GitHub-Organisation von Vercel per automatisiertem Release-Prozess (GitHub Actions, npm-Provenance) veröffentlicht und ist damit eindeutig als offizielles Vercel-/Next.js-Projekt erkennbar, nicht als Community-Nachbau. Der Server selbst führt keine Authentifizierung durch und erfordert kein Konto; er kommuniziert ausschließlich mit dem lokal laufenden Next.js-Entwicklungsprozess auf demselben Rechner. Skill Road nimmt den Eintrag als eigenständigen Katalogeintrag neben dem bereits vorhandenen Vercel MCP Server auf, weil beide Server unterschiedliche, klar abgrenzbare Aufgaben lösen: Plattformverwaltung auf der einen, Framework-interne Entwicklungsdiagnostik auf der anderen Seite.

Für wen lohnt sich Next.js DevTools MCP?

Besonders nützlich ist der Server für Entwicklerinnen und Entwickler, die mit einem KI-Coding-Agenten an einer Next.js-16-Anwendung arbeiten und Fehlerdiagnose, Routing-Überblick und Versions-Upgrades direkt im Editor-Workflow automatisieren möchten, statt Fehlermeldungen manuell aus dem Terminal oder der Browser-Konsole zu kopieren. Weniger relevant ist er für Projekte auf älteren Next.js-Versionen unterhalb von 16 oder für andere Frameworks, da die Laufzeitwerkzeuge zwingend den eingebauten /_next/mcp-Endpunkt von Next.js 16+ voraussetzen.

Node.js ab Version 20.19 (aktuelle LTS-Reihe), npm oder pnpm; für die Laufzeitwerkzeuge zusätzlich ein lokal laufendes Next.js-16-Projekt.

In der .mcp.json des Projekts next-devtools-mcp per npx -y next-devtools-mcp@latest eintragen, oder npx add-mcp next-devtools-mcp@latest für die automatische Einrichtung in allen erkannten Coding-Agenten ausführen. Next.js-Dev-Server starten (npm run dev), der MCP-Server verbindet sich dann automatisch mit dem laufenden /_next/mcp-Endpunkt.

npx -y next-devtools-mcp@latest

Keine Authentifizierung erforderlich; der Server kommuniziert ausschließlich lokal mit dem laufenden Next.js-Entwicklungsprozess auf demselben Rechner.

Lesender Zugriff auf Fehler, Logs, Routen, Seiten- und Projektmetadaten des lokalen Dev-Servers; keine schreibenden Operationen am Quellcode über den Server selbst.

Werkzeugaufrufe bleiben lokal zwischen dem MCP-Server, dem /_next/mcp-Endpunkt des Dev-Servers und dem verbundenen Coding-Agenten; Fehlermeldungen, Logs und Routendaten können in den Modellkontext des Agenten gelangen.

Entwicklungs-Logs und Fehlermeldungen können sensible Pfade oder interne Details enthalten; da diese Inhalte in den Modellkontext gelangen, sollten keine echten Produktionsgeheimnisse im Dev-Server-Log landen.