Next.js DevTools MCP — Cas d'usage, Installer & Démo en direct

Name: Next.js DevTools MCP Server
Author: vercel

Pourquoi l'utiliser

Fonctionnalités clés

De première partie — maintenu par l'équipe Vercel / Next.js
nextjs_docs — recherche de documentation faisant autorité, sans hallucinations
browser_eval — Playwright in-MCP pour tester votre application
nextjs_index / nextjs_call — communiquez avec les diagnostics du serveur dev Next 16

Démo en direct

Aperçu en pratique

vercel.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

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

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

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

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "vercel": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@vercel/next-devtools-mcp"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add vercel -- npx -y @vercel/next-devtools-mcp

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Next.js DevTools

Mettre à jour un projet Next.js vers la v16 avec des codemods guidés

👤 Ingénieurs Next.js sur v14/v15 ⏱ ~60 min advanced

Quand l'utiliser : Vous avez reporté la mise à niveau Next 16. Vous voulez un agent pour piloter les codemods et corriger les migrations API asynchrones.

Prérequis

Projet Next.js sur v14+ — Vérifiez package.json
Répertoire de travail git propre — git status affiche clean — pour que vous puissiez rétablir si nécessaire

Déroulement

Exécutez l'outil de mise à niveau

Run upgrade_nextjs_16 on this project. Walk me through each codemod before applying.✓ Copié

→ Liste des modifications prévues avec les diffs à prévisualiser
Corriger les sites d'appel API asynchrones

After codemods, build the project. For any errors from now-async cookies()/headers(), fix the call sites to use await.✓ Copié

→ La compilation réussit
Activer Cache Components

Run enable_cache_components. Fix any boundary errors it reports.✓ Copié

→ Cache components activés, l'application s'exécute

Résultat : Un projet Next 16 fonctionnant avec Cache Components, en une session ciblée au lieu d'une semaine éparpillée.

Pièges

Les codemods ne peuvent pas corriger l'utilisation asynchrone personnalisée — Exécutez la compilation après chaque étape de codemod ; corrigez manuellement lorsque le codemod marque les commentaires 'REVIEW'
Les bibliothèques tierces peuvent ne pas être prêtes pour Next 16 — Vérifiez la compatibilité des paquets avant la mise à niveau ; épinglez toute bibliothèque qui casse et déposez un problème en amont

Combiner avec : git

Déboguer un serveur dev Next en cours d'exécution via ses endpoints de diagnostic

👤 Ingénieurs Next.js sur v16+ ⏱ ~20 min advanced

Quand l'utiliser : Votre next dev s'exécute mais quelque chose ne va pas (hydratation étrange, mauvais mode de rendu). Next 16+ expose les outils d'exécution via /_next/mcp.

Prérequis

Serveur dev Next.js 16+ en cours d'exécution — npm run dev

Déroulement

Découvrez le serveur

Run nextjs_index to find my local Next dev servers and list the diagnostic tools they expose.✓ Copié

→ Port + liste des outils
Appeler les outils de diagnostic

Use nextjs_call on port <PORT> to get the route tree and render modes for /dashboard. Is it static, dynamic, or partial?✓ Copié

→ Mode de rendu par route avec explication
Corrigez le mauvais rendu

The /dashboard page uses cookies() making it fully dynamic when I wanted partial prerendering. Find the culprit import and refactor to isolate.✓ Copié

→ Le mode de rendu passe à partiel après la correction

Résultat : Intuition sur les décisions de rendu de Next sans lire 20 articles de blog.

Pièges

Les diagnostics du serveur dev diffèrent de la sortie de la compilation de production — Vérifiez toujours avec next build — le mode dev a des paramètres par défaut différents

Obtenez des réponses faisant autorité aux questions Next.js

👤 Développeurs Next.js à tous les niveaux ⏱ ~10 min beginner

Quand l'utiliser : Vous avez une question sur le comportement de Next.js. Vous ne voulez pas d'hallucinations LLM — vous voulez une citation.

Déroulement

Recherchez la documentation

Use nextjs_docs to find the official guidance on middleware vs route handlers for auth. Return matching sections.✓ Copié

→ Sections de doc citées avec URLs
Répondez avec des citations

Based only on those sections, which should I use for JWT validation in my Next 16 app, and why? Include doc URLs.✓ Copié

→ Réponse fondée avec URLs
Appliquez à mon code

Walk through my current implementation in middleware.ts. Does it align with the docs' recommendations?✓ Copié

→ Liste des lacunes concrètes

Résultat : Décisions Next.js faisant autorité soutenues par la doc, pas par l'intuition.

Pièges

La doc prend du retard par rapport à la dernière version pendant quelques semaines après son lancement — Pour les fonctionnalités de pointe, consultez également les RFC Next.js / articles de blog

Exécutez une vérification E2E sur votre application Next.js

👤 Ingénieurs Next.js ⏱ ~10 min intermediate

Quand l'utiliser : Vous venez de faire une modification. Vous voulez un test de fumée rapide avant de valider.

Déroulement

Naviguez et capturez

Use browser_eval to open http://localhost:3000/pricing. Screenshot it and capture any console errors.✓ Copié

→ Capture d'écran + résumé de la console
Cliquez sur le chemin critique

Click 'Select Pro plan', verify the checkout modal opens with the right price. Screenshot each step.✓ Copié

→ Réussi/échoué par étape
Signaler

Summarize: ok / broken / suspicious. If anything failed, paste the console error.✓ Copié

→ Verdict expédier-ou-ne-pas-expédier

Résultat : Une vérification de validité rapide intégrée dans votre boucle dev — aucun exécuteur Playwright séparé nécessaire.

Pièges

browser_eval est Playwright-lite — pas un remplacement pour la suite E2E complète — Utilisez pour les vérifications rapides ; conservez une véritable suite Playwright pour les portes de version

Combiner avec : playwright

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

vercel + playwright

browser_eval pour les vérifications rapides, Playwright pour les suites de régression complètes

Smoke-test /pricing with browser_eval. If that passes, run the Playwright suite on the critical flows.✓ Copié

vercel + git

Mettez à jour Next, validez à chaque étape

Run upgrade_nextjs_16. After each codemod, commit the diff with a descriptive message so we can bisect if something breaks.✓ Copié

vercel + sentry

Moniteur post-mise à niveau

Deploy the Next 16 build to staging. Watch Sentry for 24h and flag any new errors introduced by async API migration.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
init		Premier appel dans une nouvelle conversation	free
nextjs_docs	query	N'importe quelle question factuelle Next.js	free
browser_eval	actions (navigate, click, screenshot, etc.)	Tests E2E rapides de votre serveur dev	free (local browser)
nextjs_index		Découvrez les serveurs dev Next 16+	free
nextjs_call	port, tool_name, args	Appelez un diagnostic d'exécution Next 16+	free
upgrade_nextjs_16	project_path	Chemin de mise à niveau de v14/15 vers v16	free
enable_cache_components	project_path	Activez Cache Components dans une application v16	free

Coût et limites

Coût d'exécution

Quota d'API: Gratuit — exécution locale + recherche de documentation
Tokens par appel: Les retours de documentation peuvent être volumineux ; définissez une limite sur la recherche
Monétaire: Gratuit
Astuce: Exécutez init une fois par session pour que l'agent connaisse les outils disponibles — cela évite les essais-erreurs aléatoires

Sécurité

Permissions, secrets, portée

Stockage des identifiants : Aucun — outil local

Sortie de données : Les résultats de recherche de documentation frappent vercel.com ; browser_eval va partout où vous naviguez ; télémétrie à vercel (opt-out via NEXT_TELEMETRY_DISABLED)

Dépannage

Erreurs courantes et correctifs

nextjs_index ne trouve aucun serveur

Seuls les serveurs dev Next.js 16+ exposent /_next/mcp. Effectuez d'abord la mise à niveau, ou utilisez browser_eval pour les versions plus anciennes.

Vérifier : curl http://localhost:3000/_next/mcp

browser_eval ne parvient pas à se lancer

Binaires Playwright manquants. Exécutez npx playwright install une fois.

Codemod a laissé les fichiers dans un état partiellement migré

Rétablissez via git, puis exécutez les codemods un par un au lieu de tous à la fois. Validez entre chaque.

nextjs_docs retourne des résultats non pertinents

Ajoutez la version majeure de Next.js à votre requête : 'app router middleware in Next 16' au lieu de juste 'middleware'.

Alternatives

Next.js DevTools vs autres

Alternative	Quand l'utiliser	Compromis
Playwright MCP	Vous avez besoin de Playwright complet, pas le browser_eval allégé	Plus puissant mais pas de diagnostics spécifiques à Next.js ou de recherche de documentation
Cloud Run MCP	Vous déployez sur GCP, pas sur Vercel	Modèle d'hébergement différent ; ce MCP est axé sur l'expérience développeur Next.js, pas sur le déploiement

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills