nextjs-developer - Next.js: маршруты и серверные данные

Когда звать

• Когда создаёте приложение Next.js с App Router и нужно заранее разделить серверные данные и интерактивные компоненты.
• Когда маршрут должен показывать загрузку и ошибку, обновлять данные после формы и отдавать правильные метатеги.

Чем занимается Next.js Developer

Next.js Developer задаёт агенту порядок сборки приложения на Next.js с App Router. Автор ориентируется на Next.js 14 и новее: маршруты в папке app, серверные компоненты по умолчанию и явная граница для клиентской интерактивности.

Это скилл для написания и изменения кода. Он не подключает агента к работающему серверу Next.js и не получает сведения об ошибках вашего приложения сам. Для отдельного подключения инструментов разработки есть Next.js DevTools MCP. Эти карточки решают разные задачи и могут использоваться независимо.

Как устроена инструкция

Сначала агент должен спланировать маршруты, общие макеты и способ рендеринга. Далее - реализовать переходы и состояния загрузки, организовать получение данных, разобраться с кэшированием и проверить рабочую сборку. В конце процесса у автора указан выкат, но подключённый скилл не является вашим разрешением выкладывать сайт.

Пять справочников посвящены App Router, серверным компонентам, серверным действиям, получению данных и размещению приложения. Основной файл требует задавать cache или next.revalidate явно, не рассчитывая на неоговорённое поведение кэша. Для метатегов предлагаются generateMetadata или статический экспорт metadata.

В правилах также названы loading.tsx и error.tsx для сегментов с асинхронной загрузкой, оптимизация изображений через next/image и минимальная область действия директивы use client. Эти требования полезно сверять с конкретной версией фреймворка и принятой структурой вашего проекта.

Подключение и пробная задача

Для отдельного использования переносится вся папка skills/nextjs-developer, включая references. В QUICKSTART Jeffallan есть и установка набора целиком через плагин Claude Code. Путь для Codex зависит от способа подключения скиллов в вашем клиенте; практическую совместимость здесь не проверяли.

Начните с одной страницы списка и формы добавления записи на тестовых данных. Попросите агента объяснить, где выполняется запрос, как показывается ошибка и что обновляется после отправки формы. Отдельно запретите обращения к рабочей базе и выкат. Такой запрос проверит основные решения скилла без доступа к настоящим пользователям.

При приёмке нужны результаты сборки, а не только готовая разметка. В браузере проверьте успешную отправку, отказ сервера и повторную попытку. Если проверка скорости не запускалась, число из инструкции автора нельзя выдавать за результат страницы.

Что проверить перед реальным проектом

Скилл рассчитан на App Router и прямо исключает Pages Router. Если существующее приложение использует pages, подключение инструкции не даёт основания переносить его целиком без отдельной задачи. Некоторые примеры автора могут требовать изменений для установленной у вас версии Next.js.

Серверное действие, которое сохраняет запись, должно иметь нужные проекту проверки входных данных и прав пользователя. Пример из скилла не заменяет проверку безопасности. Ключи сервисов храните в предназначенных для секретов настройках; публичные переменные окружения не подходят для закрытых значений.

На 22 октября 2026 года проверены SKILL.md версии 1.1.0, лицензия MIT и состав каталога в закреплённом коммите. Мы не ставили этот скилл, не собирали с ним приложение и не делали выкат. Для компонентов без задач маршрутизации можно начать с React Expert.