У Next.js действительно хорошая документация. Однако её мне было недостаточно для целостного понимания того, как правильно использовать Next.js при разработке приложения.
В этой статье собраны ресурсы, которые помогли мне собрать ясную картину и, на мой взгляд, отлично подходят, чтобы дать правильный старт. Если у вас возникнут вопросы — не переживайте, ответы будут появляться по ходу. Также вы можете обратиться к официальной документации или задать конкретный вопрос ChatGPT, который подберёт ответ специально для вас.
Парадигма Next.js
Чтобы найти ответ на архитектурный вопрос “FullStack Next.js или отдельный backend?”, нужно разобраться в сути Next.js.
- Посмотреть логичное мнение на reddit (просто для контекста)
- Зафиксировать, что Route Handlers – это новый эквивалент /pages/api.
- Разобраться в сути Next.js, пересматривая ролик. Next.js – не просто фреймворк, облегчающий разработку клиента и сервера. Теперь это фреймворк, использующих иной ментальный подход к разработке.
Ролик можно смотреть с русскими субтитрами, они там хороши.
Роутинг в Next.js
Роутинг в Next.js – это охватывает не только сопоставление URL-адресов со страницами, но и функциональность, необходимую для отображения страницы (запрос данных, их обработка для передачи компоненту). Чтобы лучше разобраться в этом, стоит сделать следующие шаги:
- Вникнуть базу App Router. Next.js App Router: Routing, Data Fetching, Caching
- Вникнуть в 10 common mistakes with the Next.js App Router, который более ясно раскрывает то, как следует работать в Next.js (русские субтитры видео)
- Также нужно сформировать ясность по следующим моментам:
- В чём отличие Route Handlers от Server Actions?
- Почему Route Handlers в документации описаны в разделе Routing, а не Data Fetching?
Для решения третьего пункта лучше всего пообщаться с ChatGPT, чтобы он конкретно под тебя объяснил разницу. Чтобы не качать приложение, есть классный tg-бот-посредник @pulsegpt_bot (моя рефералка). На старте даются бесплатные 5000 токенов (местная валюта), которых хватит на долго, если использовать модель GPT-40 Omni Mini. Её достаточно для получения качественных ответов на большинство вопросов. При этом она потребляет приблизительно в 10 раз меньше токенов, чем другие модели.
Стратегия организации кода
В официальной документации хорошая страница по структуре папок.
Помимо соглашений о папках и файлах, Next.js не навязывает строгих правил по размещению файлов в проекте. Самый простой вывод — выбрать стратегию, которая подходит вам и вашей команде, и быть последовательным в ходе всего проекта.
Примером готовой стратегии может быть Feature-Sliced Design (на мой взгляд, в ней сильно проще разобраться с помощью ChatGPT, чем через официальную документацию)