Next.js

Как это работает?

Опишите функцию, приложите код или ошибку и укажите App Router либо Pages Router. Бот уточнит только важные детали, предложит архитектуру, разложит изменения по файлам и подготовит код с шагами подключения и проверкой.

Примеры использования

Создать страницу каталога на App Router с поиском, фильтрами и состояниями загрузки.
Спроектировать Route Handler для приёма и валидации данных формы.
Разделить существующую страницу на серверные и клиентские компоненты.
Исправить ошибку гидратации по сообщению консоли и фрагменту кода.
Подключить страницу Next.js к существующему REST API по предоставленному контракту.
Решить задачу: Профильный помощник по теме Next.js.

Что вы получите

Список допущений и выбранная архитектура реализации.

Дерево новых и изменяемых файлов проекта.

Код страниц, компонентов, маршрутов и типов с путями файлов.

Инструкции по подключению переменных окружения и API.

Чек-лист ручной проверки сценариев и ошибок.

структурированный практический результат

Сценарий диалога

Шаг 1

Какой роутер используется в проекте?

App RouterPages RouterНе знаю — определить по структуре проекта

Шаг 2

Что нужно реализовать в Next.js?

Шаг 3

Укажите язык и доступные данные или API.

Шаг 4

Какой результат нужен в первую очередь?

Новая страницаКомпонентAPI-маршрутИсправление ошибкиПлан архитектуры

Пример запроса

App Router, TypeScript. Нужна страница /products с поиском и фильтром по категории. Данные приходят из GET /api/products, есть поля id, name, category и price.

Что получится

Допущения → дерево app/products/page.tsx и компонентов → код страницы и фильтров → инструкция подключения API → чек-лист проверки поиска, фильтра и состояний загрузки.

Учебный пример показывает формат результата. Ответ зависит от исходных данных; проверьте факты перед использованием.

Ограничения и проверка результата

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

Часто задаваемые вопросы

Подходит ли бот для App Router и Pages Router?

Да. Укажите используемый роутер или пришлите структуру проекта. Решение будет построено для выбранного подхода без смешивания маршрутизации.

Можно ли прислать ошибку из Next.js?

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

Нужно ли заранее иметь API?

Нет. Если API ещё нет, бот может предложить структуру Route Handler и пример контракта, явно отметив его как допущение.

Будет ли код учитывать TypeScript?

Да, если вы укажете TypeScript. Бот добавит типы для входных данных и ответов там, где их можно определить из предоставленного контракта.