Что сможет агент
- Покажет агенту ошибку, которую ты видишь в браузере: текст, файл и строку. Копировать её из окна Next.js в чат больше не нужно.
- Проверит после правок, что все страницы собираются, и найдёт ссылку на файл, которого нет, ещё до того, как ты откроешь страницу.
- Поможет перейти на Next.js 16: подскажет официальную команду обновления, а после неё покажет, что сломалось и где.
- Направит агента к документации твоей версии Next.js, которая лежит прямо в проекте, чтобы он не писал код по устаревшим примерам.
- Расскажет, какие страницы есть на сайте, из каких файлов собрана открытая страница и где журнал сервера разработки.
- Кто сделал
- Vercel
- Версия
- 0.4.0
- Проверено
- 28.09.2026, Claude Code
- Лицензия
- MIT
- Документация
- nextjs.org/docs/app/guides/mcp
Подключить
Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.
Подключи MCP-сервер «Next.js DevTools» версии 0.4.0. Работай по шагам и после каждого коротко говори, что сделал.
Данные сервера (каталог code.tarasovweb.ru, проверено 28.09.2026):
- имя в конфиге: next-devtools
- официальный источник: https://github.com/vercel/next-devtools-mcp
- запуск: npx -y next-devtools-mcp@0.4.0
- переменные окружения сервера: NEXT_TELEMETRY_DISABLED=1
Правила:
1. Не ставь Node.js, uv или Docker без моего «да». Не хватает - остановись и скажи, что поставить и откуда.
2. Ставь только пакет или адрес из этого промпта. Никаких установочных скриптов из README без моего подтверждения.
3. Перед правкой конфига сделай его резервную копию.
Шаги:
0. Определи, кто ты (Claude Code, Codex или другой агент) и какая у меня система.
1. Проверь окружение: node --version и npx --version (нужен Node.js 20 или новее). Скажи, что нашёл.
2. Проверь, нет ли уже сервера с таким именем: `claude mcp get next-devtools` (в Codex: `codex mcp list`).
3. Подключи сервер:
Claude Code: claude mcp add --scope user --env 'NEXT_TELEMETRY_DISABLED=1' --transport stdio next-devtools -- npx -y next-devtools-mcp@0.4.0
Codex: codex mcp add next-devtools --env 'NEXT_TELEMETRY_DISABLED=1' -- npx -y next-devtools-mcp@0.4.0
Если ты не Claude Code и не Codex, подключи способом, принятым у тебя, с той же командой запуска.
4. Проверка: `claude mcp list` (в Codex: `codex mcp list`), статус должен быть «Connected». Попроси меня перезапустить сессию. У сервера 4 инструмента, перечисли их. Сделай пробный запрос: «Найди мой запущенный сайт на Next.js и покажи список его страниц и ошибки сборки». Покажи результат.
5. Итог одним сообщением: что добавлено и куда, статус, число инструментов, команда отката и откуда восстановить копию конфига. Откат: `claude mcp remove next-devtools --scope user` (в Codex: `codex mcp remove next-devtools`).
Если на любом шаге ошибка, не чини наугад. Покажи текст ошибки и скажи, что, по-твоему, случилось. Частые проблемы: https://code.tarasovweb.ru/mcp/nextjs-devtools#problemy- Выполнят Claude Code, Codex, Hermes и любой агент с доступом к терминалу.
Что нужно на компьютере: Node.js 20 или новее.
Ключ: не нужен.
Нужен Node.js 20.19 или новее и сайт на Next.js 16 или новее. Ошибки и страницы сайта агент видит, пока сайт запущен у тебя командой npm run dev. Переменная NEXT_TELEMETRY_DISABLED=1 в команде выключает статистику использования, которую сервер иначе отправляет Vercel после каждого сеанса.
Проверь, что работает
Найди мой запущенный сайт на Next.js и покажи список его страниц и ошибки сборки
Что должно получиться: Агент найдёт сервер разработки (обычно порт 3000), покажет страницы сайта и скажет, есть ли ошибки сборки. Сайт должен быть запущен командой npm run dev и работать на Next.js 16 или новее.
Что можно сделать
5 сценариевНайти и починить ошибку на странице
Агент сам получит ошибку, которую Next.js показывает в браузере: текст, файл и строку, откуда она вызвана. Найдёт причину в коде, поправит и проверит, что ошибок больше нет.
- nextjs_index находит запущенный сервер разработки и его порт.
- get_errors отдаёт ошибки из открытой вкладки: текст, файл, строку и цепочку вызовов.
- После правки агент снова зовёт get_errors: пустой список значит, что ошибка ушла.
Мой сайт на Next.js запущен командой npm run dev, и страница [адрес страницы, например /] показывает ошибку. Через next-devtools найди сервер разработки (nextjs_index) и получи ошибки (nextjs_call, инструмент get_errors). Если ответ «No browser sessions connected», попроси меня открыть эту страницу в браузере и повтори. Для каждой ошибки покажи файл и строку, объясни простыми словами, что случилось, и предложи правку. После правки снова вызови get_errors и убедись, что ошибок нет.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Ошибки во время работы страницы видны, только пока она открыта в браузере. Ошибки сборки агент видит и без браузера через get_compilation_issues.
- Совет. Если ошибок несколько, проси чинить по одной и проверять после каждой правки.
Перейти на Next.js 16 и найти, что сломалось
Агент проверит версию Next.js, покажет официальную команду обновления и после твоего «да» обновит проект. Потом сам найдёт, что перестало собираться, с файлом и строкой, и поправит по документации новой версии.
- nextjs_docs видит версию Next.js в проекте и для 15 и старше советует команду обновления npx @next/codemod@latest upgrade latest.
- Команда обновления меняет версии пакетов и правит код. В нашей проверке переход с 15.5.26 на 16.3.6 занял 9 секунд.
- get_compilation_issues сразу после обновления показал две ошибки сборки с файлами и строками.
- Ответ нашёлся в документации, которая после обновления лежит в самом проекте.
Проверь через next-devtools (nextjs_docs), какая версия Next.js в этом проекте. Если ниже 16, покажи команду обновления, которую советует сервер, и объясни, что она поменяет. Запусти её только после моего «да». После обновления запусти npm run dev, найди сервер через nextjs_index и вызови get_compilation_issues. Каждую ошибку объясни, найди ответ в документации внутри проекта (node_modules/next/dist/docs) и поправь. В конце снова вызови get_compilation_issues: список должен быть пустым.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Перед обновлением сохрани изменения в git или сделай копию папки: команда меняет package.json и файлы кода.
- Совет. В нашей проверке команда обновления добавила в app/layout.tsx и app/page.tsx строку export const instant = false, но не включила cacheComponents, и сайт перестал собираться. Помогла строка cacheComponents: true в next.config.ts.
- Совет. Сервер советует команду с @latest, то есть самую свежую версию. Можно попросить агента поставить точную версию, например upgrade 16.3.6: команда это умеет.
Проверить, что все страницы собираются после правок
Агент соберёт все страницы сайта без браузера и покажет ошибки сборки: файл, которого нет, неверное подключение компонента, ошибку в коде. Удобно после больших правок, пока ты сам не наткнулся на сломанную страницу.
- get_routes возвращает все страницы сайта, в том числе только что добавленные.
- get_compilation_issues собирает все страницы разом и не требует открытого браузера.
- compile_route проверяет одну страницу по адресу, например /about.
Я поменял код сайта на Next.js. Через next-devtools найди запущенный сервер разработки (nextjs_index), покажи список страниц (get_routes) и вызови get_compilation_issues. Если есть ошибки, для каждой покажи файл и строку и поправь. Потом повтори get_compilation_issues, пока список не станет пустым.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Аргументы compile_route агент передаёт объектом: {"path": "/about"}. Если передать строкой, сервер ответит ошибкой Invalid argument 'args'.
Ответ по документации твоей версии Next.js
Агент найдёт документацию ровно той версии Next.js, что стоит у тебя в проекте, ответит по ней и назовёт файл, откуда взял ответ. В Next.js 16 она лежит внутри проекта, интернет для этого не нужен.
- nextjs_docs смотрит установленную версию Next.js и возвращает путь к папке node_modules/next/dist/docs.
- Агент ищет тему по файлам документации и читает нужный раздел.
Прежде чем писать код, вызови nextjs_docs из next-devtools с темой [что нужно, например generateMetadata] и прочитай подходящий раздел в папке, которую он вернёт. Ответь по этой документации: как это сделать в моей версии Next.js, с примером для моего проекта и названием файла документации, откуда взял ответ.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. В нашей проверке в проекте на Next.js 16.3.6 лежало 456 файлов документации.
- Совет. Для Next.js 15 и старше документации в проекте нет: сервер предложит обновиться, а до тех пор отправит агента на nextjs.org/docs.
Разобрать журнал сервера разработки
Агент прочитает журнал, куда Next.js 16 пишет сообщения сервера и консоли браузера, и разберёт ошибки и предупреждения: откуда они и что с ними делать.
- get_logs возвращает путь к файлу журнала внутри папки .next проекта.
- Агент читает файл сам: в каждой записи источник (сервер или браузер), уровень и текст, у ошибок - файл и строка.
Через next-devtools получи путь к журналу сервера разработки (nextjs_call, инструмент get_logs), прочитай последние записи и расскажи простыми словами, какие там ошибки и предупреждения, в каких файлах и что с ними делать. Начни с ошибок.Бесплатно: почта или сразу Телеграм-канал клуба
- Совет. Журнал пишется и без открытой вкладки: в нашей проверке ошибка страницы попала туда сразу после запроса к ней.
Пример работы
редакция, прогон при проверке 28.09.2026- Задача
- Найти, почему главная тестового сайта падает с ошибкой, и починить
- Промпт
- Какие сейчас ошибки на моём сайте на Next.js? Найди причину и почини
- Что сделал агент
- nextjs_index за 76 мс нашёл сервер разработки на порту 3000: Next.js 16.3.6, 9 инструментов работающего сайта.
- Без открытой вкладки get_errors отвечает «No browser sessions connected». С открытой главной он за 5 мс вернул TypeError «Cannot read properties of undefined (reading 'map')»: components/Reviews.tsx, строка 8, вызов из app/page.tsx, строка 9.
- Правка: блок отзывов получил список, а для пустого списка показывает «Отзывов пока нет».
- Повторный get_errors вернул пустой список, get_page_metadata: страница собрана из app/layout.tsx и app/page.tsx.
- Результат
- Ошибку с файлом и строкой агент получил за 5 мс, без копирования из окна браузера. После правки ошибок нет. Прогон на тестовом проекте Next.js 16.3.6 с намеренной ошибкой.
Инструменты
4 · описания около 1,7 тыс. токеновЖёлтым то, что агент делает от твоего имени, красным запуск команд на компьютере. Нажми на имя: покажем, что делает инструмент, и описание, которое читает агент. В Claude Code инструменты грузятся по запросу и почти не занимают память агента; в других клиентах и при своём адресе подключения (ANTHROPIC_BASE_URL) описания грузятся целиком на каждом сообщении.
Когда не нужен
Если сайт на Next.js 15 или старше, инструменты работающего сайта не заработают: адрес, через который агент спрашивает Next.js, появился только в версии 16, и сервер сам предложит обновиться. Если нужна только документация, подключение не обязательно: Next.js 16.3 и новее сам кладёт в проект файлы AGENTS.md и CLAUDE.md, которые ведут агента к документации внутри проекта, если npm run dev запускает агент (в нашей проверке на 16.3.6 так и вышло). Чтобы проверить, как сайт выглядит и работает в браузере, возьми Playwright или Chrome DevTools из каталога: этот сервер браузер не открывает.
Частые проблемы
8Агент получает «No browser sessions connected»
Ошибки во время работы страницы Next.js берёт из открытой вкладки браузера, а сайт в браузере не открыт. Открой сайт в браузере (обычно http://localhost:3000) и попроси агента повторить. Ошибки сборки видны и без браузера: попроси вызвать get_compilation_issues.
«No MCP tools found on port ...» или «MCP endpoint not found»
Сайт работает на Next.js 15 или старше: адреса, через который агент спрашивает сайт, там нет. Посмотри версию next в package.json. Обнови проект до 16 (команду подскажет nextjs_docs) или работай без этого подключения.
«Invalid argument 'args': Expected object, received string»
В версии 0.4.0 сервер описывает поле args как строку, а принимает только объект. Попроси агента передать args объектом, например {"path": "/about"}, без кавычек вокруг.
claude mcp list показывает «⏸ Pending approval»
Подключение записано в .mcp.json проекта (так советует документация Next.js), и Claude Code ждёт твоего согласия на серверы из этого файла. Запусти claude в папке проекта: Claude Code попросит одобрить next-devtools. Команда с этой страницы кладёт подключение в твои общие настройки, там одобрение не нужно.
Агент не видит инструментов сервера
Клиент не перезапущен после подключения: Claude Code читает подключения при старте сессии. Закрой и открой сессию, потом проверь: claude mcp list.
«spawn npx ENOENT» при запуске
Клиент не видит npx: приложения с иконкой не читают PATH из настроек терминала. Пропиши полный путь к npx. Узнать его: which npx на Mac, where npx на Windows.
«Unsupported engine» или падение при старте
Старая версия Node.js. Нужна 20 или новее, проверить: node --version.
Codex: сервер не успевает запуститься
Codex ждёт запуска 10 секунд, а первый запуск npx скачивает пакет дольше. Во вкладке Codex уже стоит startup_timeout_sec = 30, возьми фрагмент оттуда.
Безопасность и данные
- Кто сделал
- Vercel (официальный). Исходный код: github.com/vercel/next-devtools-mcp, лицензия MIT.
- Что видит агент
- То, что сообщает твой сайт на Next.js, пока он запущен командой npm run dev: ошибки с фрагментами кода, список страниц, путь к папке проекта и к журналу сервера разработки (журнал агент читает сам, там сообщения сервера и консоли браузера). Всё это уходит в модель вместе с разговором. Адрес /_next/mcp, через который идут вопросы, встроен в сам Next.js 16 и работает при npm run dev с подключением или без.
- Куда уходят данные
- Данные остаются на компьютере.
- Что может изменить
- Сами инструменты ничего не меняют: читают ответы сайта и файлы package.json, проверяют, установлена ли программа agent-browser. Сервер пишет свой журнал в папку ~/.next-devtools-mcp, там же случайный идентификатор для статистики: эти файлы появляются и при выключенной статистике. Для обновления до Next.js 16 и для работы с браузером сервер советует агенту команды npx @next/codemod@latest upgrade latest и npm install -g agent-browser без закреплённой версии. Их выполняет уже агент: пусть спросит тебя перед запуском.
- Наша проверка
- Источник - репозиторий vercel/next-devtools-mcp и пакет next-devtools-mcp в npm, собран из этого репозитория в GitHub Actions с подтверждением сборки, лицензия MIT; на пакет ссылается документация Next.js. В базе OSV записей по версии 0.4.0 нет, команд, которые запускаются при установке, нет ни у пакета, ни у его зависимостей. У зависимости @modelcontextprotocol/sdk 1.25.2 есть запись CVE-2026-25536 про утечку между клиентами общего сетевого сервера; этот сервер работает отдельным процессом с одним клиентом, условия уязвимости не выполняются. Описания всех 4 инструментов прочитаны, скрытых указаний агенту нет, своих инструкций у сервера нет. Соединения проверены перехватом: при запуске npx обращается к реестру npm, сам сервер - только к твоему компьютеру, порты 3000-3010. По умолчанию после сеанса отдельный процесс отправляет на telemetry.nextjs.org сведения о системе (ОС, версия Node.js), случайный идентификатор, обезличенный отпечаток пути к папке проекта и имена вызванных инструментов со счётчиками; с NEXT_TELEMETRY_DISABLED=1 попыток отправки нет. Версия в команде закреплена.
- Версия
- В командах закреплена версия 0.4.0: ставится ровно то, что мы проверили.
- Проверить самому
- агент прочитает код подключения как недоверенный
Полезные материалы
- Инструкция · на английскомNext.js MCP ServerОфициальная страница Next.js: что сайт на Next.js 16 отдаёт агенту и как подключить next-devtools-mcp.
- Инструкция · на английскомnext-devtools-mcp: репозиторийИнструменты, что изменилось в версии 0.4.0, какую статистику собирает сервер и как её выключить.
- Инструкция · на английскомNext.js и агенты: документация внутри проектаКак файл AGENTS.md ведёт агента к документации твоей версии Next.js.
- Инструкция · на английскомКак обновиться до Next.js 16Официальный путь с 15 на 16: команда обновления и что меняется в коде.
- Инструкция · на английскомПереход на Cache ComponentsЧто значит строка export const instant = false, которую оставляет команда обновления, и как включить cacheComponents.
- Статья · на английскомNext.js 16 DevTools MCP с Claude CodeПодробный разбор подключения в Claude Code, автор обновил его в августе 2026 под версию 0.4.
Журнал проверок
- 28.09.2026·0.4.0·Claude Code, macOS·работаетbcc59c4e7eff5141
Отпечаток - контрольная сумма того, что сервер отдаёт агенту. Поменялся при той же версии - поменялось поведение.
Похожие подключения
Chrome DevToolsАгент сам найдёт, почему сайт тормозит или ломается: консоль, сеть, скорость, LighthouseGoogle·на компьютере·без ключаОпасное сочетаниеPlaywrightГлаза агента: открывает твой сайт, кликает, заполняет формы и проверяет, что всё работаетMicrosoft·на компьютере·без ключаЗапускает команды на компьютереContext7Свежая документация библиотек в агенте: он пишет код по текущей версии, а не по памятиUpstash·удалённый·без ключаПодключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.
