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

Name: Next.js DevTools MCP Server
Author: vercel

Por que usar

Principais recursos

Primeira parte — mantido pelo time Vercel / Next.js
nextjs_docs — pesquisa de documentação autoritária, sem alucinações
browser_eval — Playwright integrado ao MCP para testar seu aplicativo
nextjs_index / nextjs_call — comunique-se com diagnósticos do servidor dev Next 16

Demo ao vivo

Como fica na prática

vercel.replay ▶ pronto

0/0

Instalar

Escolha seu 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"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

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

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

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

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

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

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

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

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

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

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

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

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

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Next.js DevTools

Atualize um projeto Next.js para v16 com codemods guiados

👤 Engenheiros Next.js nas versões v14/v15 ⏱ ~60 min advanced

Quando usar: Você tem adiado a atualização para Next 16. Você quer um agente que execute codemods e corrija migrações de API assíncronas.

Pré-requisitos

Projeto Next.js na v14+ — Verifique package.json
Working tree git limpa — git status mostra limpa — para que você possa reverter se necessário

Fluxo

Execute a ferramenta de atualização

Execute upgrade_nextjs_16 neste projeto. Me mostre cada codemod antes de aplicar.✓ Copiado

→ Lista de mudanças planejadas com diffs para visualizar
Corrija os sites de chamada assíncrona

Após codemods, construa o projeto. Para qualquer erro de chamadas agora-assíncronas cookies()/headers(), corrija os sites de chamada para usar await.✓ Copiado

→ Build passa
Habilite Cache Components

Execute enable_cache_components. Corrija erros de limite que ele relata.✓ Copiado

→ Cache Components habilitados, aplicativo executado

Resultado: Um projeto Next 16 funcional com Cache Components, em uma sessão focada em vez de uma semana dispersa.

Armadilhas

Codemods não podem corrigir uso assíncrono com padrão customizado — Execute o build após cada etapa de codemod; corrija manualmente quando o codemod marcar comentários 'REVIEW'
Bibliotecas de terceiros podem não estar prontas para Next 16 — Verifique a compatibilidade do pacote antes de atualizar; fixe qualquer lib que quebrar e abra uma issue upstream

Combine com: git

Diagnostique um servidor dev Next em execução via seus endpoints de diagnóstico

👤 Engenheiros Next.js na v16+ ⏱ ~20 min advanced

Quando usar: Seu next dev está em execução mas algo está errado (hidratação estranha, modo de renderização errado). Next 16+ expõe ferramentas de tempo de execução via /_next/mcp.

Pré-requisitos

Servidor dev Next.js 16+ em execução — npm run dev

Fluxo

Descubra o servidor

Execute nextjs_index para encontrar meus servidores Next locais e listar as ferramentas de diagnóstico que expõem.✓ Copiado

→ Porta + lista de ferramentas
Chame ferramentas de diagnóstico

Use nextjs_call na porta <PORT> para obter a árvore de rotas e modos de renderização para /dashboard. É estático, dinâmico ou parcial?✓ Copiado

→ Modo de renderização por rota com explicação
Corrija a renderização ruim

A página /dashboard usa cookies() tornando-a totalmente dinâmica quando eu queria renderização parcial. Encontre a importação culpada e refatore para isolar.✓ Copiado

→ Modo de renderização muda para parcial após correção

Resultado: Insight nas decisões de renderização do Next sem ler 20 postagens de blog.

Armadilhas

Diagnósticos do servidor dev diferem do resultado da build de produção — Sempre verifique com next build — modo dev tem padrões diferentes

Obtenha respostas autoritárias sobre perguntas Next.js

👤 Devs Next.js em qualquer nível ⏱ ~10 min beginner

Quando usar: Você tem uma pergunta sobre comportamento Next.js. Você não quer alucinações de LLM — você quer uma citação.

Fluxo

Pesquise docs

Use nextjs_docs para encontrar a orientação oficial sobre middleware vs route handlers para auth. Retorne seções correspondentes.✓ Copiado

→ Seções de doc citadas com URLs
Responda com citações

Com base apenas nessas seções, qual devo usar para validação JWT no meu aplicativo Next 16, e por quê? Inclua URLs de documentação.✓ Copiado

→ Resposta fundamentada com URLs
Aplique ao meu código

Caminhe pela minha implementação atual em middleware.ts. Ela se alinha com as recomendações dos docs?✓ Copiado

→ Lista de gaps concreta

Resultado: Decisões Next.js autoritárias apoiadas por docs, não intuição.

Armadilhas

Docs ficam atrasadas em relação à versão mais recente por algumas semanas após o lançamento — Para recursos de ponta, também verifique as RFCs do Next.js / postagens de blog

Execute uma verificação E2E no seu aplicativo Next.js

👤 Engenheiros Next.js ⏱ ~10 min intermediate

Quando usar: Você acabou de fazer uma mudança. Você quer um teste rápido antes de fazer commit.

Fluxo

Navegue e capture

Use browser_eval para abrir http://localhost:3000/pricing. Tire uma screenshot e capture qualquer erro de console.✓ Copiado

→ Screenshot + resumo de console
Clique através do caminho crítico

Clique em 'Select Pro plan', verifique se o modal de checkout abre com o preço correto. Screenshot de cada etapa.✓ Copiado

→ Pass/fail por etapa
Relatório

Resuma: ok / quebrado / suspeito. Se algo falhar, cole o erro de console.✓ Copiado

→ Veredito de enviar-ou-não-enviar

Resultado: Uma verificação rápida integrada ao seu loop de dev — sem executor Playwright separado necessário.

Armadilhas

browser_eval é Playwright-lite — não é um substituto para suite E2E completa — Use para verificações rápidas; mantenha uma suite Playwright real para gates de lançamento

Combine com: playwright

Combinações

Combine com outros MCPs para 10× de alavancagem

vercel + playwright

browser_eval para verificações rápidas, Playwright para suites de regressão completas

Teste rápido /pricing com browser_eval. Se passar, execute a suite Playwright nos fluxos críticos.✓ Copiado

vercel + git

Atualize Next, faça commit a cada etapa

Execute upgrade_nextjs_16. Após cada codemod, faça commit do diff com uma mensagem descritiva para que possamos fazer bisect se algo quebrar.✓ Copiado

vercel + sentry

Monitoramento pós-atualização

Implante a build Next 16 no staging. Monitore Sentry por 24h e sinalize qualquer erro novo introduzido pela migração assíncrona de API.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
init		Primeira chamada em uma nova conversa	free
nextjs_docs	query	Qualquer pergunta factual sobre Next.js	free
browser_eval	actions (navigate, click, screenshot, etc.)	Testes E2E rápidos do seu servidor dev	free (local browser)
nextjs_index		Descubra servidores dev Next 16+	free
nextjs_call	port, tool_name, args	Invoque um diagnóstico de tempo de execução Next 16+	free
upgrade_nextjs_16	project_path	Caminho de atualização da v14/15 para v16	free
enable_cache_components	project_path	Ative Cache Components em um aplicativo v16	free

Custo e limites

O que custa rodar

Cota de API: Grátis — execução local + pesquisa de docs
Tokens por chamada: Retornos de docs podem ser grandes; defina limite na pesquisa
Monetário: Free
Dica: Execute init uma vez por sessão para que o agente conheça ferramentas disponíveis — economiza tentativa aleatória e erro

Segurança

Permissões, segredos, alcance

Armazenamento de credenciais: Nenhuma — ferramenta local

Saída de dados: Pesquisa de docs atinge vercel.com; browser_eval vai para onde você navega; telemetria para vercel (opt-out via NEXT_TELEMETRY_DISABLED)

Solução de problemas

Erros comuns e correções

nextjs_index não encontra servidores

Apenas servidores dev Next.js 16+ expõem /_next/mcp. Atualize primeiro, ou use browser_eval para versões mais antigas.

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

browser_eval falha ao iniciar

Binários Playwright ausentes. Execute npx playwright install uma vez.

Codemod deixou arquivos em um estado meio migrado

Reverta via git, execute os codemods um de cada vez em vez de todos de uma vez. Faça commit entre cada.

nextjs_docs retorna resultados irrelevantes

Adicione a versão principal do Next.js à sua consulta: 'app router middleware in Next 16' em vez de apenas 'middleware'.

Alternativas

Next.js DevTools vs. outros

Alternativa	Quando usar	Troca
Playwright MCP	Você precisa do Playwright completo, não do browser_eval lite	Mais poderoso, mas sem diagnósticos específicos do Next.js ou pesquisa de docs
Cloud Run MCP	Você implementa na GCP, não na Vercel	Modelo de hospedagem diferente; este MCP é focado em DX do Next.js, não em deploy

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills