Как я организовал проект на Next.js

Значимый прорыв формирует отрасль ИИ: markak 11 минут назад Как я организовал проект на Next. js Средний 20 мин 299 ReactJS * JavaScript * Из песочницы ВведениеВ этой статье я расскажу, как организовал свой проект на Next. На примере реального приложения рассмотрены структура проекта, организация маршрутизации, работа с данными через DAL, аутентификация, валидация, тестирование и другие подходы, которые я использовал в процессе разработки.

Статья не претендует на универсальное руководство, а показывает один из возможных вариантов организации приложения. Краткий обзорФункционал приложения уже подробно описан в соответствующих разделах документации. Поэтому здесь я решил не дублировать текст и ограничиться видео, которое наглядно демонстрирует основные сценарии работы приложения на примере работы с задачами:Просмотр данных — для работы с задачами доступны разные режимы отображения (список и карточки), поиск по заголовку, сортировка по различным полям, пагинация и различные фильтры.

Технические детали

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

Управление с клавиатуры — в системе поддерживается управление интерфейсом с клавиатуры. На примере базовых действий показана работа с задачами только с помощью клавиатуры: создание, редактирование, удаление и изменение статуса. Мобильная версия — приложение имеет адаптивный интерфейс и поддерживает устройства с различными разрешениями экрана.

Мобильная версия приложения имеет некоторые отличия по функциональности от десктопной, что сделано для улучшения пользовательского опыта. Структура проектаНиже представлена структура проекта. ├── app/ │ ├── / │ │ ├── (auth)/ # Роуты аутентификации │ │ ├── (dashboard)/ # Роуты дашборда │ │ ├── (site)/ # Роуты лендинга и документации │ │ ├── error.

Отраслевые последствия

tsx # stories для error. tsx # Fallback UI для обработки ошибок │ │ ├── layout. tsx # Корневой макет приложения │ │ ├── not-found.

tsx # stories для not-found. tsx │ │ ├── not-found. tsx # Страница 404 │ │ ├── SWRProvider.

tsx # Провайдер для SWRConfig │ ├── api/ # Route Handlers │ └── globals.

Событие, по словам экспертов, усилит конкуренцию в сфере ИИ.