СмыслоКод

Next.js DevTools

Официальный

Vercel · лицензия MIT

Агент сам видит ошибки твоего сайта на Next.js 16 - с файлом и строкой, без копирования

На твоём компьютереБез ключаРаботает из РоссииТолько читаетБесплатноДанные остаются на компьютере

✓ Проверено 28.09.2026 на версии 0.4.0 в Claude Code (macOS) · 4 инструмента

Подключить ↓Что можно сделать ↓

Что сможет агент

  • Покажет агенту ошибку, которую ты видишь в браузере: текст, файл и строку. Копировать её из окна Next.js в чат больше не нужно.
  • Проверит после правок, что все страницы собираются, и найдёт ссылку на файл, которого нет, ещё до того, как ты откроешь страницу.
  • Поможет перейти на Next.js 16: подскажет официальную команду обновления, а после неё покажет, что сломалось и где.
  • Направит агента к документации твоей версии Next.js, которая лежит прямо в проекте, чтобы он не писал код по устаревшим примерам.
  • Расскажет, какие страницы есть на сайте, из каких файлов собрана открытая страница и где журнал сервера разработки.

Паспорт

Кто сделал
Vercel
Статус
Официальный
Лицензия
MIT
Проверено
28.09.2026
Версия
0.4.0
Где работает
На твоём компьютере
Доступ
Без ключа
Россия
Работает из России
Данные
Данные остаются на компьютере
Цена
Бесплатно
Проверено в
Claude Code
Исходный код
github.com/vercel/next-devtools-mcp
Документация
nextjs.org/docs/app/guides/mcp

Подключить

Промпт собран из паспорта: команды в нём те же, что во вкладках Claude Code и Codex.

Промпт для агента
Подключи MCP-сервер «Next.js DevTools» версии 0.4.0. Работай по шагам и после каждого коротко говори, что сделал.

Данные сервера (каталог smyslokod.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://smyslokod.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 16.3.6 на тестовом сайте из нашей проверки: TypeError в components/Reviews.tsx, строка 8. Эту же ошибку с файлом и строкой агент получил через get_errors
Та же страница после правки: блок отзывов работает, get_errors вернул пустой список

Найти и починить ошибку на странице

Агент сам получит ошибку, которую Next.js показывает в браузере: текст, файл и строку, откуда она вызвана. Найдёт причину в коде, поправит и проверит, что ошибок больше нет.

  1. nextjs_index находит запущенный сервер разработки и его порт.
  2. get_errors отдаёт ошибки из открытой вкладки: текст, файл, строку и цепочку вызовов.
  3. После правки агент снова зовёт 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 15.5.26 на 16.3.6: строка export const instant = false в app/layout.tsx требует включить cacheComponents. Эту же ошибку агент получил через get_compilation_issues

Перейти на Next.js 16 и найти, что сломалось

Агент проверит версию Next.js, покажет официальную команду обновления и после твоего «да» обновит проект. Потом сам найдёт, что перестало собираться, с файлом и строкой, и поправит по документации новой версии.

  1. nextjs_docs видит версию Next.js в проекте и для 15 и старше советует команду обновления npx @next/codemod@latest upgrade latest.
  2. Команда обновления меняет версии пакетов и правит код. В нашей проверке переход с 15.5.26 на 16.3.6 занял 9 секунд.
  3. get_compilation_issues сразу после обновления показал две ошибки сборки с файлами и строками.
  4. Ответ нашёлся в документации, которая после обновления лежит в самом проекте.
Промпт
Проверь через 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: команда это умеет.

Проверить, что все страницы собираются после правок

Агент соберёт все страницы сайта без браузера и покажет ошибки сборки: файл, которого нет, неверное подключение компонента, ошибку в коде. Удобно после больших правок, пока ты сам не наткнулся на сломанную страницу.

  1. get_routes возвращает все страницы сайта, в том числе только что добавленные.
  2. get_compilation_issues собирает все страницы разом и не требует открытого браузера.
  3. 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 она лежит внутри проекта, интернет для этого не нужен.

  1. nextjs_docs смотрит установленную версию Next.js и возвращает путь к папке node_modules/next/dist/docs.
  2. Агент ищет тему по файлам документации и читает нужный раздел.
Промпт
Прежде чем писать код, вызови nextjs_docs из next-devtools с темой [что нужно, например generateMetadata] и прочитай подходящий раздел в папке, которую он вернёт. Ответь по этой документации: как это сделать в моей версии Next.js, с примером для моего проекта и названием файла документации, откуда взял ответ.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. В нашей проверке в проекте на Next.js 16.3.6 лежало 456 файлов документации.
  • Совет. Для Next.js 15 и старше документации в проекте нет: сервер предложит обновиться, а до тех пор отправит агента на nextjs.org/docs.

Разобрать журнал сервера разработки

Агент прочитает журнал, куда Next.js 16 пишет сообщения сервера и консоли браузера, и разберёт ошибки и предупреждения: откуда они и что с ними делать.

  1. get_logs возвращает путь к файлу журнала внутри папки .next проекта.
  2. Агент читает файл сам: в каждой записи источник (сервер или браузер), уровень и текст, у ошибок - файл и строка.
Промпт
Через next-devtools получи путь к журналу сервера разработки (nextjs_call, инструмент get_logs), прочитай последние записи и расскажи простыми словами, какие там ошибки и предупреждения, в каких файлах и что с ними делать. Начни с ошибок.

Бесплатно: почта или сразу Телеграм-канал клуба

  • Совет. Журнал пишется и без открытой вкладки: в нашей проверке ошибка страницы попала туда сразу после запроса к ней.

Пример работы

Задача

Найти, почему главная тестового сайта падает с ошибкой, и починить

Промпт

Какие сейчас ошибки на моём сайте на Next.js? Найди причину и почини

Что сделал агент

  1. nextjs_index за 76 мс нашёл сервер разработки на порту 3000: Next.js 16.3.6, 9 инструментов работающего сайта.
  2. Без открытой вкладки get_errors отвечает «No browser sessions connected». С открытой главной он за 5 мс вернул TypeError «Cannot read properties of undefined (reading 'map')»: components/Reviews.tsx, строка 8, вызов из app/page.tsx, строка 9.
  3. Правка: блок отзывов получил список, а для пустого списка показывает «Отзывов пока нет».
  4. Повторный get_errors вернул пустой список, get_page_metadata: страница собрана из app/layout.tsx и app/page.tsx.

Результат

Ошибку с файлом и строкой агент получил за 5 мс, без копирования из окна браузера. После правки ошибок нет. Прогон на тестовом проекте Next.js 16.3.6 с намеренной ошибкой.

Редакция, 28.09.2026 · прогон при проверке

Инструменты сервера

4

4 инструмента, описания около 1,7 тыс. токенов. В Claude Code это почти не мешает: инструменты грузятся по запросу. Если в настройках 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 из каталога: этот сервер браузер не открывает.

Частые проблемы

Агент получает «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: ставится ровно то, что мы проверили.

Проверить самому

Промпт Артемия: агент прочитает код подключения как недоверенный и покажет строки, где читаются секреты, уходят данные или меняются твои настройки.

Полезные материалы

Журнал проверок

ДатаВерсияГдеИтогОтпечаток
28.09.20260.4.0Claude Code, macOSработаетbcc59c4e7eff5141

Отпечаток - контрольная сумма того, что сервер отдаёт агенту: инструкций, инструментов, подсказок и ресурсов. Поменялся при той же версии - поменялось поведение.

Похожие подключения

Подключения делают их авторы. Мы проверяем установку и описываем, что они умеют, но код и сервис остаются чужими. Перед установкой посмотри, какие данные получит агент.