Install
npx add-mcp next-devtools-mcp@latest누구에게 맞나
이미 Next.js 16+ 개발 서버를 돌리며 코딩 에이전트(증거 예시는 Claude, Cursor)가 실시간 런타임 오류, 라우트, 로그를 보게 하려는 사람에게 맞다. 증거는 다음을 명시한다: next-devtools-mcp는 얇은 커넥터이며 이 기기의 Next.js 16+ dev server를 발견하고 내장 MCP 엔드포인트 /_next/mcp를 프록시한다.
이미 Node.js v20.19 또는 더 새로운 LTS와 npm 또는 pnpm이 있어야 한다. nextjs_index / nextjs_call은 개발 서버가 실행 중일 것도 요구한다. 떠 있는 Next 16+ 프로세스가 없으면 런타임 도구를 기대하지 마라.
문서와 마이그레이션 워크플로는 더 이상 이 서버에 없다. 문서는 node_modules/next/dist/docs/에 있고, 업그레이드 / Cache Components는 agent skills로 배포된다.
3분 만에 첫 시도 마치기
페이지의 설치 명령을 따른다(수동 JSON을 동시에 두 번째 주 경로로 쓰지 마라):
npx add-mcp next-devtools-mcp@latest
-y를 더하면 프롬프트를 건너뛰고 감지된 모든 에이전트에 설치한다. -g를 더하면 프로젝트 전반에 전역 설치한다. 동등한 클라이언트 설정은 npx -y next-devtools-mcp@latest이며 대조용이다. 첫 시도는 add-mcp를 따른다.
전제 조건: 이 기기에 Next.js 16+ 프로젝트가 있고 next dev가 이미 돌고 있다. 이번엔 로컬 개발 서버를 발견하고 런타임 정보를 읽는다. 네트워크도 로컬 프로젝트도 없는 샌드박스가 아니다.
설정 위치: add-mcp가 감지한 MCP 클라이언트에 쓴다. 또는 클라이언트의 mcpServers.next-devtools에 수동으로 쓴다.
저위험 첫 호출: 먼저 nextjs_index를 호출해 실행 중인 dev server를 발견하고 각자의 런타임 MCP 도구를 나열한다. 먼저 nextjs_call로 Server Actions를 트리거하지 마라. nextjs_docs와 browser_eval은 게이트웨이이며 일을 하는 worker가 아니다.
성공 신호: nextjs_index가 실행 중인 Next.js 16+ 서버 한 대 이상과 그 런타임 도구를 나열한다. 목록이 비면 먼저 dev server를 띄우고 브라우저 자동화로 바꾸지 마라.
사용 사례
사례 1: 에이전트가 현재 dev server를 볼 수 있는지 확인한다. nextjs_index를 호출한다. 증거는 실행 중 서버를 발견하고 각 대의 런타임 MCP 도구를 나열한다고 보장한다. 포트 스캔 범위나 다중 프로젝트 선택 매개변수는 쓰지 않는다. 확인할 수 있는 것은 지금 발견된 대들을 봤다는 것이다.
사례 2: 이미 발견한 한 대의 오류, 라우트, 로그를 읽는다. nextjs_index 뒤에 nextjs_call을 호출한다. 증거는 호출 가능한 런타임 능력으로 errors, routes, logs, Server Actions를 적는다. 앞의 셋은 관찰에 가깝다. Server Actions는 앱 상태를 바꿀 수 있다. 처음에는 errors/routes/logs만 받고 Server Actions를 먼저 호출하지 마라. nextjs_docs는 에이전트를 버전에 맞는 node_modules/next/dist/docs/로 가리킬 뿐이다.
사용 경계
이것은 프록시이며 완전한 Next 문서 사이트도 브라우저 자동화 본체도 아니다. browser_eval은 agent-browser CLI만 가리킨다. 문서와 마이그레이션은 더 이상 이 서버에 살지 않는다. 런타임 도구는 Next.js 16+와 실행 중인 dev server에 의존한다. 증거는 nextjs_call의 매개변수 필드를 쓰지 않으며 Server Actions의 undo 경로도 없다. 읽기 전용 로그 조회와 Server Actions 트리거를 같은 위험으로 보지 마라.