Frontend Template

Next.js 15 · TypeScript 5 · Feature-Sliced Design · pnpm

Стек

	Инструмент	Версия
Фреймворк	Next.js	15
Язык	TypeScript	5
Архитектура	Feature-Sliced Design	—
Unit-тесты	Jest + Testing Library	29 / 16
E2E-тесты	Playwright	1.60
UI-документация	Storybook	8
Стейт-менеджер	Zustand	5
Стили	SCSS + CSS Modules	—
Линтер	ESLint	10
Форматирование	Prettier	3
Git-хуки	Husky + lint-staged	9 / 17
Коммиты	Commitlint · Conventional Commits	21
Контейнеризация	Docker + Compose	—

Быстрый старт

Локально

pnpm install
pnpm exec playwright install chromium
pnpm dev

Через Docker

docker compose up --build

Открыть http://localhost:3000.

Команды

pnpm dev                # Запустить dev-сервер Next.js
pnpm build              # Собрать продакшн-сборку
pnpm start              # Запустить продакшн-сервер

pnpm test               # Unit-тесты (Jest)
pnpm test:watch         # Unit-тесты в watch-режиме
pnpm test:coverage      # Unit-тесты с отчётом о покрытии

pnpm test:e2e           # E2E-тесты (Playwright, без браузера)
pnpm test:e2e:ui        # E2E-тесты с интерактивным UI Playwright
pnpm test:e2e:report    # Открыть HTML-отчёт последнего запуска

pnpm storybook          # Storybook на порту :6006
pnpm build-storybook    # Собрать статичный Storybook

pnpm lint               # Проверить ESLint
pnpm lint:fix           # Исправить ошибки ESLint
pnpm format             # Отформатировать код Prettier
pnpm format:check       # Проверить форматирование

Docker

# Разработка — app :3000 + Storybook :6006
docker compose up --build

# Запустить в фоне
docker compose up -d

# Unit-тесты внутри контейнера
docker compose --profile test up test

# E2E-тесты внутри контейнера (ждёт готовности app)
docker compose --profile e2e up e2e

# Всё сразу: app + Storybook + тесты
docker compose --profile test --profile e2e up --build

# Остановить все сервисы
docker compose down

# Логи конкретного сервиса
docker compose logs -f app
docker compose logs -f storybook

# Зайти внутрь контейнера
docker compose exec app sh

# Установить пакет внутри контейнера
docker compose exec app pnpm add <package>

# Продакшн-превью
docker compose -f docker-compose.prod.yml up --build

Структура проекта

.
├── e2e/                       # Playwright e2e-тесты
├── src/
│   ├── app/                   # Next.js App Router (layout, page, providers)
│   ├── pages/                 # FSD: композиция страниц
│   ├── widgets/               # FSD: самостоятельные блоки UI
│   ├── features/              # FSD: пользовательские сценарии
│   ├── entities/              # FSD: бизнес-сущности
│   └── shared/
│       ├── ui/Example/        # Пример компонента (тест + story + scss)
│       ├── styles/            # Переменные, миксины, брейкпоинты
│       ├── lib/
│       ├── api/
│       ├── config/
│       └── testing/           # Настройка Jest и заглушки
├── Dockerfile                 # Продакшн-образ (многоступенчатый)
├── Dockerfile.dev             # Образ для разработки
├── docker-compose.yml         # Оркестрация для разработки
├── docker-compose.prod.yml    # Оркестрация для продакшн-превью
├── playwright.config.ts
├── jest.config.ts
├── next.config.ts
├── eslint.config.mjs
├── commitlint.config.ts
└── tsconfig.json

Документация

• Feature-Sliced Design — архитектура, слои, правила импортов, структура слайса
• Коммиты — Conventional Commits, типы, примеры, зачем это нужно
• Тестирование — Jest unit-тесты, Playwright e2e, когда что использовать
• Storybook — написание stories, autodocs, controls, декораторы
• Next.js — App Router, серверные и клиентские компоненты, маршрутизация
• SCSS — CSS Modules, переменные, миксины, брейкпоинты
• Zustand — сторы, middleware, тестирование, когда использовать
• Docker — разработка, тесты, Storybook, продакшн-превью, profiles