Столкнулся впервые с проектом Next js. Дизайн проекта представляет из себя интернет-магазин, блогинг и лендинги. Он имеет уже много нарисованных страниц лендингов, каждая из них имеет 90% различий в элементах и 10% сходства, т.е. много компонентов будет в проекте. Сам проект в коде сейчас имеет три-четыре страницы, в нём нет популярной архитектуры, просто папки app, assets с картинками, components, data, types, ui с базой компонентов Button, Checkbox и т.д.
Стэк проекта:
- @tanstack/react-query
- next
- scss, css modules, мелкие миксины
- typescript
- бэкенда нет, не знаю какой будет
У меня нет подходящего опыта с фреймворком как реакт и Next, поэтому хочу задать вопросы тут по разработке и ведению проекта.
Вопросы:
- Как вести структуру/архитектуру папок проекта? Сейчас блоки страниц импортируются в pages.tsx, они лежат в components/. Внутри них разных карточки, кнопки, тексты тоже лежат в components/ одной кучей без разделения.
- Где собственно располагать блоки/секции страницы, разделять ли их на компоненты?
- В компонентах, блоках и страницах стили пишутся scss модулями. Для компонентов модули уместны, а для блока и одной страницы так подключать стили не обязательно?
- Использовать ли Tailwind CSS? Я заметил, что дизайн перенасыщен и мне постоянно приходилось писать много селекторов в scss с другой шириной, высотой. Кажется что компонент уже есть, но по дизайну на следующей странице у него другая высота или размер текста.
Средний
Простой
Средний
Сложный
Простой
