S.Gromov
f2358da397
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов - Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime - Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
6.0 KiB
title, description, keywords
| title | description | keywords | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Создание проекта вручную | Поэтапное создание нового проекта без использования шаблона. |
|
Создание проекта вручную
Поэтапное создание нового проекта без использования шаблона.
Состав эталонного проекта
| Компонент | Роль | Раздел |
|---|---|---|
| Next.js | Фреймворк (роутинг, сборка, SSR) | Next.js |
| Алиасы | Импорты по слоям SLM | Алиасы |
| Biome | Линтер и форматтер (замена ESLint + Prettier) | Biome |
| Стили | Глобальные токены и breakpoints | Стили |
| PostCSS | CSS-процессор для custom-media и вложенности | PostCSS |
| SVG-спрайты | Иконки через <SvgSprite/>, управление цветом |
SVG-спрайты |
| VS Code | Настройки редактора и расширения | VS Code |
| Шаблоны генерации | .templates/ для @gromlab/create |
Шаблоны генерации |
Убрать компонент из состава — значит согласованно отказаться от части стайлгайда. Частичные проекты возможны (только Next.js, Next.js + стили и т.п.), но не являются эталоном.
Канон раскладки
В src/ допустимы только слои SLM: app/, layouts/, screens/, widgets/, business/, infrastructure/, ui/, shared/. Любая другая папка в src/ — нарушение канона (Структура проекта, Архитектура).
В частности: src/app/ содержит только файлы роутинга Next.js и инициализации, без каталогов styles/, assets/, components/.
Порядок установки
Подсистемы ставятся в фиксированном порядке — он отражает зависимости между шагами.
1. Next.js
Скелет фреймворка — обязательный первый шаг, остальное опирается на него.
См. Next.js. После выполнения проверки этого раздела npm run build должен проходить.
2. Алиасы
Заменить дефолтный "@/*" в tsconfig.json на канонический список из восьми слой-префиксов.
См. Алиасы.
3. Biome
Линтер и форматтер. Подключается до написания кода, иначе в проекте копятся несогласованные правки.
См. Biome.
4. Стили (базовая инфраструктура)
Файлы variables.css, media.css, global.css в src/shared/styles/ и подключение global.css в src/app/layout.tsx. CSS-процессор на этом шаге не ставится.
См. Стили.
5. PostCSS
CSS-процессор поверх базовых стилей: @custom-media, вложенность, autoprefixer. Ставится только после шага 4 — опирается на src/shared/styles/media.css.
См. PostCSS.
6. SVG-спрайты
Пакет @gromlab/svg-sprites, генерация спрайт-файла и React-компонента <SvgSprite/>.
См. SVG-спрайты.
7. VS Code
Расширения и настройки редактора. Опирается на установленный Biome (форматирование при сохранении) и PostCSS (ассоциация *.css).
См. VS Code.
8. Шаблоны генерации
Папка .templates/ для генератора модулей @gromlab/create.
См. Шаблоны генерации.
Правила
- Порядок шагов фиксирован. Перестановка ломает зависимости (PostCSS требует базовых стилей, VS Code — установленного Biome).
- Между шагами обязательна проверка из соответствующего раздела. Не переходить дальше, пока чеклист текущего шага не пройден.
- Слои
src/(layouts/,screens/,widgets/,business/,infrastructure/,ui/) не создавать авансом. Появляются по мере первого модуля. Исключения —src/app/(создаётсяcreate-next-app),src/shared/styles/(шаг 1) иsrc/shared/sprites/icons/(шаг 6). - Посторонние каталоги в
src/(assets/,utils/,lib/,components/и т.п.) — запрещены. - Подмножество шагов допустимо. Можно ставить только Next.js и часть инструментов; полный набор — это эталон, а не обязательство.