nextjs-fetch-data-example/ai/nextjs-style-guide/applied/creating-project/nextjs.md

---
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/` ([Структура проекта](../project-structure.md)) |
| `--import-alias "@/*"` | Placeholder | Требуется флагом; после установки `paths` полностью переписывается на слой-префиксы (см. [Алиасы](../aliases.md)) |
| `--no-eslint` | ESLint не ставится | Линтер и форматтер — Biome ([Biome](../biome.md)) |
| `--no-tailwind` | Tailwind не ставится | Стилизация — PostCSS Modules ([Стили](../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 <h1>Home</h1>
}
```

Очистить `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 (
    <html lang="ru">
      <body>{children}</body>
    </html>
  )
}
```

### 3. Создать папку `src/shared/styles/`

Глобальные стили в SLM-архитектуре живут в слое `shared`, а не в `src/app/` ([Структура проекта](../project-structure.md)).

```bash
mkdir -p src/shared/styles
```

Остальные слои (`layouts/`, `screens/`, `widgets/`, `business/`, `infra/`, `ui/`) заводятся при появлении первого модуля в них. `src/shared/styles/` — единственный подкаталог `shared/`, который заводится сразу: без него не настроить стили на следующих шагах.

## Правила

- **Конфликт с непустой директорией** — не удалять файлы пользователя автоматически. Ставить в подпапку или временно перенести посторонние файлы.
- **Отклонение от канонических флагов** (pnpm, Tailwind, ESLint и т.п.) — только осознанное, с пониманием, что стайлгайд этого не предусматривает.
- **Слои `src/`** не создавать авансом — появляются при первом модуле. Алиасы прописываются сразу на все восемь слоёв (см. [Алиасы](../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`).
-												docs: добавить стайлгайд nextjs-style-guide в репозиторий

- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов
- Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime
- Удалены устаревшие файлы (спрайты, скрипты, стили из app/)

											
										
										
											2026-04-30 19:32:10 +03:00
+								---
 								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
 								```
 								| Флаг | Значение | Почему так |
 								|------|----------|------------|
-												style: Обновление код стайла

											
										
										
											2026-05-08 19:34:39 +03:00
+								| `--typescript` | TS включён | Стайлгайд требует TypeScript ([Типизация](../../basics/typing.md)) |
-												docs: добавить стайлгайд nextjs-style-guide в репозиторий

- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов
- Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime
- Удалены устаревшие файлы (спрайты, скрипты, стили из app/)

											
										
										
											2026-04-30 19:32:10 +03:00
+								| `--app` | App Router | Pages Router не используется |
-												style: Обновление код стайла

											
										
										
											2026-05-08 19:34:39 +03:00
+								| `--src-dir` | Код в `src/` | Архитектура SLM требует `src/` ([Структура проекта](../project-structure.md)) |
 								| `--import-alias "@/*"` | Placeholder | Требуется флагом; после установки `paths` полностью переписывается на слой-префиксы (см. [Алиасы](../aliases.md)) |
 								| `--no-eslint` | ESLint не ставится | Линтер и форматтер — Biome ([Biome](../biome.md)) |
 								| `--no-tailwind` | Tailwind не ставится | Стилизация — PostCSS Modules ([Стили](../styles/styles-usage.md)) |
-												docs: добавить стайлгайд nextjs-style-guide в репозиторий

- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов
- Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime
- Удалены устаревшие файлы (спрайты, скрипты, стили из app/)

											
										
										
											2026-04-30 19:32:10 +03:00
+								| `--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 <h1>Home</h1>
 								}
 								```
 								Очистить `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 (
 								    <html lang="ru">
 								      <body>{children}</body>
 								    </html>
 								  )
 								}
 								```
 								### 3. Создать папку `src/shared/styles/`
-												style: Обновление код стайла

											
										
										
											2026-05-08 19:34:39 +03:00
+								Глобальные стили в SLM-архитектуре живут в слое `shared`, а не в `src/app/` ([Структура проекта](../project-structure.md)).
-												docs: добавить стайлгайд nextjs-style-guide в репозиторий

- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов
- Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime
- Удалены устаревшие файлы (спрайты, скрипты, стили из app/)

											
										
										
											2026-04-30 19:32:10 +03:00
 								```bash
 								mkdir -p src/shared/styles
 								```
-												style: Обновлены правила код стайла

											
										
										
											2026-05-08 08:21:34 +03:00
+								Остальные слои (`layouts/`, `screens/`, `widgets/`, `business/`, `infra/`, `ui/`) заводятся при появлении первого модуля в них. `src/shared/styles/` — единственный подкаталог `shared/`, который заводится сразу: без него не настроить стили на следующих шагах.
-												docs: добавить стайлгайд nextjs-style-guide в репозиторий

- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов
- Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime
- Удалены устаревшие файлы (спрайты, скрипты, стили из app/)

											
										
										
											2026-04-30 19:32:10 +03:00
 								## Правила
 								- **Конфликт с непустой директорией** — не удалять файлы пользователя автоматически. Ставить в подпапку или временно перенести посторонние файлы.
 								- **Отклонение от канонических флагов** (pnpm, Tailwind, ESLint и т.п.) — только осознанное, с пониманием, что стайлгайд этого не предусматривает.
-												style: Обновление код стайла

											
										
										
											2026-05-08 19:34:39 +03:00
+								- **Слои `src/`** не создавать авансом — появляются при первом модуле. Алиасы прописываются сразу на все восемь слоёв (см. [Алиасы](../aliases.md)).
-												docs: добавить стайлгайд nextjs-style-guide в репозиторий

- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов
- Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime
- Удалены устаревшие файлы (спрайты, скрипты, стили из app/)

											
										
										
											2026-04-30 19:32:10 +03:00
+								- **`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`).