S.Gromov
f2358da397
- Добавлена документация SLM-архитектуры, базовых правил и прикладных разделов - Добавлены разделы: стили, SVG-спрайты, шаблоны генерации, PostCSS, REST, Realtime - Удалены устаревшие файлы (спрайты, скрипты, стили из app/)
113 lines
5.9 KiB
Markdown
113 lines
5.9 KiB
Markdown
---
|
||
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 <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/` ([Структура проекта](../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`).
|