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