Создание проекта вручную

Сборка эталонного Next.js-проекта шаг за шагом — для случаев, когда нужен контроль над каждым шагом или шаблон недоступен.

Если шаблон доступен — быстрее использовать Создание проекта из шаблона.

Состав эталонного проекта

Компонент	Роль	Раздел
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 и часть инструментов; полный набор — это эталон, а не обязательство.