NextJS Style Guide

Appearance

Next.js ​

Установка фреймворка через create-next-app и очистка дефолтного шаблона. На выходе — чистый скелет с App Router и TypeScript.

Требования ​

  • 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
ФлагЗначениеПочему так
--typescriptTS включёнСтайлгайд требует TypeScript (Типизация)
--appApp RouterPages Router не используется
--src-dirКод в src/Архитектура SLM требует src/ (Структура проекта)
--import-alias "@/*"PlaceholderТребуется флагом; после установки paths полностью переписывается на слой-префиксы (см. Алиасы)
--no-eslintESLint не ставитсяЛинтер и форматтер — Biome (Biome)
--no-tailwindTailwind не ставитсяСтилизация — PostCSS Modules (Стили)
--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/ (Структура проекта).

bash
mkdir -p src/shared/styles

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

Правила ​

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