--- title: Чистая установка Next.js description: "Установка Next.js без лишнего шаблона — голый каркас под дальнейшую сборку." keywords: [next.js, create-next-app, npx, установка, инициализация, фреймворк, скаффолдинг, app router, typescript] --- # Чистая установка Next.js Установка Next.js без лишнего шаблона — голый каркас под дальнейшую сборку. ## Требования - Node.js 18.18+ (рекомендуется LTS 20+). - npm 10+. - Рабочая папка пуста, либо для установки выбрана подпапка (`create-next-app@16+` отказывается ставиться в непустую директорию). ## Установка ### 1. Инициализация через `create-next-app` Флаги зафиксированы и не согласовываются — это канон стайлгайда: ```bash npx create-next-app@latest my-app \ --typescript \ --app \ --src-dir \ --import-alias "@/*" \ --no-eslint \ --no-tailwind \ --use-npm ``` | Флаг | Значение | Почему так | |------|----------|------------| | `--typescript` | TS включён | Стайлгайд требует TypeScript ([Типизация](../basics/typing.md)) | | `--app` | App Router | Pages Router не используется | | `--src-dir` | Код в `src/` | Архитектура SLM требует `src/` ([Структура проекта](../applied/project-structure.md)) | | `--import-alias "@/*"` | Placeholder | Требуется флагом; после установки `paths` полностью переписывается на слой-префиксы (см. [Алиасы](../applied/aliases.md)) | | `--no-eslint` | ESLint не ставится | Линтер и форматтер — Biome ([Biome](../applied/biome.md)) | | `--no-tailwind` | Tailwind не ставится | Стилизация — PostCSS Modules ([Стили](../applied/styles/styles-usage.md)) | | `--use-npm` | Пакетный менеджер — npm | Единый инструмент в проектах | ### 2. Очистить дефолтный шаблон `create-next-app` генерирует демо-страницу со стилями и ассетами, а Next.js 16+ дополнительно кладёт в корень собственные `AGENTS.md` и `CLAUDE.md` — всё это удаляется. ```bash rm src/app/page.module.css rm src/app/globals.css rm public/next.svg public/vercel.svg public/file.svg public/globe.svg public/window.svg rm -f AGENTS.md CLAUDE.md ``` Заменить `src/app/page.tsx` на минимальный: ```tsx // src/app/page.tsx export default function HomePage() { return

Home

} ``` Очистить `src/app/layout.tsx` от импорта шрифтов и `globals.css`: ```tsx // src/app/layout.tsx import type { Metadata } from 'next' export const metadata: Metadata = { title: 'App', description: '', } export default function RootLayout({ children }: { children: React.ReactNode }) { return ( {children} ) } ``` ### 3. Создать папку `src/shared/styles/` Глобальные стили в SLM-архитектуре живут в слое `shared`, а не в `src/app/` ([Структура проекта](../applied/project-structure.md)). ```bash mkdir -p src/shared/styles ``` Остальные слои (`layouts/`, `screens/`, `widgets/`, `business/`, `infrastructure/`, `ui/`) заводятся при появлении первого модуля в них. `src/shared/styles/` — единственный подкаталог `shared/`, который заводится сразу: без него не настроить стили на следующих шагах. ## Правила - **Конфликт с непустой директорией** — не удалять файлы пользователя автоматически. Ставить в подпапку или временно перенести посторонние файлы. - **Отклонение от канонических флагов** (pnpm, Tailwind, ESLint и т.п.) — только осознанное, с пониманием, что стайлгайд этого не предусматривает. - **Слои `src/`** не создавать авансом — появляются при первом модуле. Алиасы прописываются сразу на все восемь слоёв (см. [Алиасы](../applied/aliases.md)). - **`AGENTS.md` от Next.js** удаляется в шаге 2. Повторно не создаётся. - **Biome, стили, PostCSS, SVG-спрайты, VS Code** — отдельные шаги установки, не в этом разделе. ## Проверка установки - В корне проекта: `next.config.ts`, `tsconfig.json`, `package.json`. - В `package.json`: Next.js установлен, нет `eslint`, `tailwindcss`. - В `src/app/` присутствуют минимальные `page.tsx` и `layout.tsx`. `globals.css`, `page.module.css` отсутствуют. Каталогов `styles/`, `assets/`, `providers/`, `components/` в `src/app/` нет. - Папка `src/shared/styles/` создана (пустая). - В `src/` из слоёв SLM присутствуют только `app/` и `shared/` (с `styles/`). Посторонних каталогов нет. - В `public/` удалены `next.svg`, `vercel.svg`, `file.svg`, `globe.svg`, `window.svg`. - В корне проекта нет `AGENTS.md` и `CLAUDE.md` от Next.js. - `npm run build` завершается успешно. - Пакетный менеджер — npm (нет `pnpm-lock.yaml`, `yarn.lock`, `bun.lockb`).