91 lines
6.0 KiB
Markdown
91 lines
6.0 KiB
Markdown
|
---
|
|||
|
|
title: Создание проекта вручную
|
|||
|
|
description: Поэтапное создание нового проекта без использования шаблона.
|
|||
|
|
keywords: [создать проект, новый проект, с нуля, init, initialize, scaffold, create-next-app, начать проект, поднять проект, эталонный проект, ручная установка]
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
# Создание проекта вручную
|
|||
|
|
|
|||
|
|
Поэтапное создание нового проекта без использования шаблона.
|
|||
|
|
|
|||
|
|
## Состав эталонного проекта
|
|||
|
|
|
|||
|
|
| Компонент | Роль | Раздел |
|
|||
|
|
|-----------|------|--------|
|
|||
|
|
| Next.js | Фреймворк (роутинг, сборка, SSR) | [Next.js](./nextjs.md) |
|
|||
|
|
| Алиасы | Импорты по слоям SLM | [Алиасы](../applied/aliases.md) |
|
|||
|
|
| Biome | Линтер и форматтер (замена ESLint + Prettier) | [Biome](../applied/biome.md) |
|
|||
|
|
| Стили | Глобальные токены и breakpoints | [Стили](../applied/styles/styles-setup.md) |
|
|||
|
|
| PostCSS | CSS-процессор для custom-media и вложенности | [PostCSS](../applied/postcss.md) |
|
|||
|
|
| SVG-спрайты | Иконки через `<SvgSprite/>`, управление цветом | [SVG-спрайты](../applied/svg-sprites/svg-sprites-setup.md) |
|
|||
|
|
| VS Code | Настройки редактора и расширения | [VS Code](../applied/vscode.md) |
|
|||
|
|
| Шаблоны генерации | `.templates/` для `@gromlab/create` | [Шаблоны генерации](../applied/templates/templates-setup.md) |
|
|||
|
|
|
|||
|
|
Убрать компонент из состава — значит согласованно отказаться от части стайлгайда. Частичные проекты возможны (только Next.js, Next.js + стили и т.п.), но не являются эталоном.
|
|||
|
|
|
|||
|
|
## Канон раскладки
|
|||
|
|
|
|||
|
|
В `src/` допустимы только слои SLM: `app/`, `layouts/`, `screens/`, `widgets/`, `business/`, `infrastructure/`, `ui/`, `shared/`. Любая другая папка в `src/` — нарушение канона ([Структура проекта](../applied/project-structure.md), [Архитектура](../basics/architecture/index.md)).
|
|||
|
|
|
|||
|
|
В частности: `src/app/` содержит только файлы роутинга Next.js и инициализации, без каталогов `styles/`, `assets/`, `components/`.
|
|||
|
|
|
|||
|
|
## Порядок установки
|
|||
|
|
|
|||
|
|
Подсистемы ставятся в фиксированном порядке — он отражает зависимости между шагами.
|
|||
|
|
|
|||
|
|
### 1. Next.js
|
|||
|
|
|
|||
|
|
Скелет фреймворка — обязательный первый шаг, остальное опирается на него.
|
|||
|
|
|
|||
|
|
См. [Next.js](./nextjs.md). После выполнения проверки этого раздела `npm run build` должен проходить.
|
|||
|
|
|
|||
|
|
### 2. Алиасы
|
|||
|
|
|
|||
|
|
Заменить дефолтный `"@/*"` в `tsconfig.json` на канонический список из восьми слой-префиксов.
|
|||
|
|
|
|||
|
|
См. [Алиасы](../applied/aliases.md).
|
|||
|
|
|
|||
|
|
### 3. Biome
|
|||
|
|
|
|||
|
|
Линтер и форматтер. Подключается **до** написания кода, иначе в проекте копятся несогласованные правки.
|
|||
|
|
|
|||
|
|
См. [Biome](../applied/biome.md).
|
|||
|
|
|
|||
|
|
### 4. Стили (базовая инфраструктура)
|
|||
|
|
|
|||
|
|
Файлы `variables.css`, `media.css`, `global.css` в `src/shared/styles/` и подключение `global.css` в `src/app/layout.tsx`. CSS-процессор на этом шаге не ставится.
|
|||
|
|
|
|||
|
|
См. [Стили](../applied/styles/styles-setup.md).
|
|||
|
|
|
|||
|
|
### 5. PostCSS
|
|||
|
|
|
|||
|
|
CSS-процессор поверх базовых стилей: `@custom-media`, вложенность, autoprefixer. Ставится **только после шага 4** — опирается на `src/shared/styles/media.css`.
|
|||
|
|
|
|||
|
|
См. [PostCSS](../applied/postcss.md).
|
|||
|
|
|
|||
|
|
### 6. SVG-спрайты
|
|||
|
|
|
|||
|
|
Пакет `@gromlab/svg-sprites`, генерация спрайт-файла и React-компонента `<SvgSprite/>`.
|
|||
|
|
|
|||
|
|
См. [SVG-спрайты](../applied/svg-sprites/svg-sprites-setup.md).
|
|||
|
|
|
|||
|
|
### 7. VS Code
|
|||
|
|
|
|||
|
|
Расширения и настройки редактора. Опирается на установленный Biome (форматирование при сохранении) и PostCSS (ассоциация `*.css`).
|
|||
|
|
|
|||
|
|
См. [VS Code](../applied/vscode.md).
|
|||
|
|
|
|||
|
|
### 8. Шаблоны генерации
|
|||
|
|
|
|||
|
|
Папка `.templates/` для генератора модулей `@gromlab/create`.
|
|||
|
|
|
|||
|
|
См. [Шаблоны генерации](../applied/templates/templates-setup.md).
|
|||
|
|
|
|||
|
|
## Правила
|
|||
|
|
|
|||
|
|
- **Порядок шагов фиксирован.** Перестановка ломает зависимости (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 и часть инструментов; полный набор — это эталон, а не обязательство.
|