Next-04. Итоговый проект

Итоговый проект собирает темы курса в одно приложение. До начала вёрстки опишите, что именно вы делаете и как проверите результат.

План проекта

Подготовьте короткий документ со следующими пунктами:

1. Идея и пользователи: какую задачу решает сайт и для кого он сделан.
2. Страницы: перечислите адреса и назначение каждой страницы.
3. Блоки интерфейса: например, шапка, карточки, форма, фильтры.
4. Действия: что пользователь может нажать, отправить, выбрать или изменить.
5. Данные: что хранится в приложении, откуда данные приходят, нужен ли API или серверная база.
6. Состояния: загрузка, пустой список, ошибка, успех.
7. Адаптация и темы: как страницы ведут себя на узком экране, какие цвета и состояния есть в обеих темах.

Не добавляйте сервер или внешнее API просто «на будущее». Сначала сформулируйте, какие данные проекту нужно сохранять или получать, и выберите самый простой подходящий способ.

Архитектура и документация

Для страниц и общих оболочек используйте маршруты и layouts. Перед добавлением "use client" проверьте, нужна ли странице интерактивность браузера: в App Router компоненты по умолчанию могут выполняться на сервере, а клиентская граница нужна для состояния, событий и браузерных API. Об этом подробнее в руководстве Server and Client Components.

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

Результат

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