Как следует разрабатывать большой проект на Next.js?

Question

[TtT RrR]

Столкнулся впервые с проектом Next js. Дизайн проекта представляет из себя интернет-магазин, блогинг и лендинги. Он имеет уже много нарисованных страниц лендингов, каждая из них имеет 90% различий в элементах и 10% сходства, т.е. много компонентов будет в проекте. Сам проект в коде сейчас имеет три-четыре страницы, в нём нет популярной архитектуры, просто папки app, assets с картинками, components, data, types, ui с базой компонентов Button, Checkbox и т.д.
Стек проекта:

• @tanstack/react-query
  
• next
  
• scss, css modules, мелкие миксины
  
• typescript
  
• бэкенда нет, не знаю какой будет
  

У меня нет подходящего опыта с фреймворком как реакт и Next, поэтому хочу задать вопросы тут по разработке и ведению проекта.
Вопросы:

1. Как вести структуру/архитектуру папок проекта? Сейчас блоки страниц импортируются в pages.tsx, они лежат в components/. Внутри них разных карточки, кнопки, тексты тоже лежат в components/ одной кучей без разделения.
   
2. Где собственно располагать блоки/секции страницы, разделять ли их на компоненты?
   
3. В компонентах, блоках и страницах стили пишутся scss модулями. Для компонентов модули уместны, а для блока и одной страницы так подключать стили не обязательно?
   
4. Использовать ли Tailwind CSS? Я заметил, что дизайн перенасыщен и мне постоянно приходилось писать много селекторов в scss с другой шириной, высотой. Кажется что компонент уже есть, но по дизайну на следующей странице у него другая высота или размер текста.
   

Answer 1

[VoidVolker]

В общем случае точно так как и не на нексте: изучаете ТЗ/требования проекта и в их рамках проектируете архитектуру. Можете как использовать стандартные подходы типа MVC/MVVC и прочее, если они удовлетворяют требованиям так и что-то другое. Если же нет — дорабатываете наиболее подходящий вариант до ваших требований и, обязательно, всё подробно документируете.

Кажется что компонент уже есть, но по дизайну на следующей странице у него другая высота или размер текста.

Это косяк дизайнера. В этом случае следует требовать у дизайнера привести похожие компоненты к единому виду.