Next.js DevTools MCP — Casos de uso, Instalar & Demo en vivo

Name: Next.js DevTools MCP Server
Author: vercel

Por qué usarlo

Características clave

Oficial — mantenido por el equipo de Vercel / Next.js
nextjs_docs — búsqueda de documentación autorizada, sin alucinaciones
browser_eval — Playwright integrado en MCP para probar tu aplicación
nextjs_index / nextjs_call — comunica con los diagnósticos del servidor dev de Next 16

Demo en vivo

Cómo se ve en la práctica

vercel.replay ▶ listo

0/0

Instalar

Elige tu cliente

~/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"
      ]
    }
  }
}

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

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

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

Cursor usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

VS Code → Cline → MCP Servers → Edit

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.config/zed/settings.json

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

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: Next.js DevTools

Actualiza un proyecto Next.js a v16 con codemods guiados

👤 Ingenieros de Next.js en v14/v15 ⏱ ~60 min advanced

Cuándo usarlo: Has estado posponiendo la actualización a Next 16. Quieres que un agente ejecute codemods y corrija las migraciones de API async.

Requisitos previos

Proyecto Next.js en v14+ — Verifica package.json
Árbol de trabajo git limpio — git status muestra limpio — para poder revertir si es necesario

Flujo

Ejecuta la herramienta de actualización

Ejecuta upgrade_nextjs_16 en este proyecto. Explícame cada codemod antes de aplicarlo.✓ Copiado

→ Lista de cambios planeados con diffs para previsualizar
Corrige los sitios de llamadas a APIs async

Después de los codemods, construye el proyecto. Para cualquier error de cookies()/headers() que ahora son async, corrige los sitios de llamadas para usar await.✓ Copiado

→ La construcción pasa exitosamente
Habilita Cache Components

Ejecuta enable_cache_components. Corrige cualquier error de límite que reporte.✓ Copiado

→ Cache Components habilitados, la aplicación se ejecuta

Resultado: Un proyecto Next 16 funcional con Cache Components, en una sesión enfocada en lugar de una semana dispersa.

Errores comunes

Los codemods no pueden corregir el uso de async con patrones personalizados — Ejecuta la construcción después de cada paso del codemod; corrige manualmente cuando el codemod etiqueta comentarios 'REVIEW'
Las librerías de terceros pueden no estar listas para Next 16 — Verifica la compatibilidad del paquete antes de actualizar; fija cualquier librería que se rompa y abre un issue en el repositorio original

Combinar con: git

Depura un servidor dev Next en ejecución a través de sus endpoints de diagnóstico

👤 Ingenieros de Next.js en v16+ ⏱ ~20 min advanced

Cuándo usarlo: Tu next dev está en ejecución pero algo no está bien (hidratación rara, modo de renderizado incorrecto). Next 16+ expone herramientas de runtime a través de /_next/mcp.

Requisitos previos

Servidor dev Next.js 16+ en ejecución — npm run dev

Flujo

Descubre el servidor

Ejecuta nextjs_index para encontrar mis servidores dev Next locales y enumera las herramientas de diagnóstico que exponen.✓ Copiado

→ Puerto + lista de herramientas
Llama a las herramientas de diagnóstico

Usa nextjs_call en el puerto <PORT> para obtener el árbol de rutas y modos de renderizado para /dashboard. ¿Es estático, dinámico o parcial?✓ Copiado

→ Modo de renderizado por ruta con explicación
Corrige el renderizado incorrecto

La página /dashboard usa cookies() haciéndola completamente dinámica cuando quería pre-renderizado parcial. Encuentra la importación culpable y refactoriza para aislar.✓ Copiado

→ El modo de renderizado cambia a parcial después de la corrección

Resultado: Perspectiva sobre las decisiones de renderizado de Next sin leer 20 artículos de blog.

Errores comunes

Los diagnósticos del servidor dev difieren de la salida de construcción de producción — Siempre verifica con next build — el modo dev tiene valores por defecto diferentes

Obtén respuestas autorizadas a preguntas sobre Next.js

👤 Desarrolladores de Next.js de cualquier nivel ⏱ ~10 min beginner

Cuándo usarlo: Tienes una pregunta sobre el comportamiento de Next.js. No quieres alucinaciones del LLM — quieres una cita.

Flujo

Busca en la documentación

Usa nextjs_docs para encontrar la guía oficial sobre middleware vs route handlers para autenticación. Devuelve las secciones coincidentes.✓ Copiado

→ Secciones de documentación citadas con URLs
Responde con citas

Basándome solo en esas secciones, ¿cuál debo usar para validación JWT en mi aplicación Next 16, y por qué? Incluye URLs de documentación.✓ Copiado

→ Respuesta fundamentada con URLs
Aplica a mi código

Recorre mi implementación actual en middleware.ts. ¿Se alinea con las recomendaciones de la documentación?✓ Copiado

→ Lista concreta de brechas

Resultado: Decisiones de Next.js autorizadas respaldadas por documentación, no por intuición.

Errores comunes

La documentación se queda atrás de la última versión durante algunas semanas después del lanzamiento — Para características de vanguardia, también verifica los RFCs de Next.js / artículos de blog

Ejecuta una prueba E2E en tu aplicación Next.js

👤 Ingenieros de Next.js ⏱ ~10 min intermediate

Cuándo usarlo: Acabas de hacer un cambio. Quieres una prueba rápida antes de hacer commit.

Flujo

Navega y captura

Usa browser_eval para abrir http://localhost:3000/pricing. Toma una captura de pantalla y captura cualquier error de consola.✓ Copiado

→ Captura de pantalla + resumen de consola
Haz clic en la ruta crítica

Haz clic en 'Seleccionar plan Pro', verifica que se abra el modal de pago con el precio correcto. Toma una captura de pantalla de cada paso.✓ Copiado

→ Éxito/fallo por paso
Reporta

Resume: ok / roto / sospechoso. Si algo falló, pega el error de consola.✓ Copiado

→ Veredicto de desplegar-o-no-desplegar

Resultado: Una verificación de cordura rápida integrada en tu ciclo de desarrollo — no necesitas un ejecutor Playwright separado.

Errores comunes

browser_eval es Playwright-lite — no es un reemplazo para un conjunto E2E completo — Úsalo para comprobaciones rápidas; mantén un conjunto Playwright real para compuertas de lanzamiento

Combinar con: playwright

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

vercel + playwright

browser_eval para comprobaciones rápidas, Playwright para suites de regresión completas

Prueba de humo /pricing con browser_eval. Si eso pasa, ejecuta la suite Playwright en los flujos críticos.✓ Copiado

vercel + git

Actualiza Next, haz commit en cada paso

Ejecuta upgrade_nextjs_16. Después de cada codemod, haz commit del diff con un mensaje descriptivo para que podamos hacer bisect si algo se rompe.✓ Copiado

vercel + sentry

Monitor post-actualización

Despliega la construcción de Next 16 a staging. Monitorea Sentry durante 24h e indica cualquier error nuevo introducido por la migración de API async.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar	Coste
init		Primera llamada en una nueva conversación	gratis
nextjs_docs	consulta	Cualquier pregunta factual sobre Next.js	gratis
browser_eval	acciones (navegar, hacer clic, captura de pantalla, etc.)	Pruebas E2E rápidas de tu servidor dev	gratis (navegador local)
nextjs_index		Descubre servidores dev Next 16+	gratis
nextjs_call	puerto, nombre_herramienta, argumentos	Invoca un diagnóstico de runtime de Next 16+	gratis
upgrade_nextjs_16	ruta_proyecto	Ruta de actualización de v14/15 a v16	gratis
enable_cache_components	ruta_proyecto	Activa Cache Components en una aplicación v16	gratis

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Gratis — ejecución local + búsqueda de documentación
Tokens por llamada: Los retornos de documentación pueden ser grandes; establece un límite en la búsqueda
Monetario: Gratis
Consejo: Ejecuta init una vez por sesión para que el agente conozca las herramientas disponibles — evita prueba y error aleatorio

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Ninguno — herramienta local

Salida de datos: Las búsquedas de documentación acceden a vercel.com; browser_eval va donde navegues; telemetría a vercel (optar por no participar mediante NEXT_TELEMETRY_DISABLED)

Resolución de problemas

Errores comunes y soluciones

nextjs_index no encuentra servidores

Solo los servidores dev de Next.js 16+ exponen /_next/mcp. Actualiza primero, o usa browser_eval para versiones más antiguas.

Verificar: curl http://localhost:3000/_next/mcp

browser_eval no se puede iniciar

Faltan binarios de Playwright. Ejecuta npx playwright install una vez.

El codemod dejó los archivos en un estado semimigrado

Revierte mediante git, luego ejecuta los codemods uno a la vez en lugar de todos a la vez. Haz commit entre cada uno.

nextjs_docs devuelve resultados irrelevantes

Agrega la versión principal de Next.js a tu consulta: 'app router middleware in Next 16' en lugar de solo 'middleware'.

Alternativas

Next.js DevTools vs otros

Alternativa	Cuándo usarla	Contrapartida
MCP de Playwright	Necesitas Playwright completo, no el browser_eval lite	Más potente pero sin diagnósticos específicos de Next.js o búsqueda de documentación
MCP de Cloud Run	Despliegas a GCP, no a Vercel	Modelo de alojamiento diferente; este MCP se enfoca en DX de Next.js, no en despliegue

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills