S.Gromov
a544d41a03
- Добавлены devDependencies: svg-sprite, postcss-preset-mantine, postcss-simple-vars, colorette - Добавлен npm-скрипт `sprite` для генерации SVG-спрайтов - Обновлены настройки и расширения VS Code - Переименованы слои: entities → business, features → infrastructure, shared/ui → ui - Обновлены шаблоны генерации (.templates) под новые слои - Обновлены path-алиасы в tsconfig.json: убран префикс @/, добавлены алиасы по слоям - Импорт в src/app/page.tsx переведён на алиас слоя - Удалён postcss.config.mjs - Добавлен скрипт scripts/create-svg-sprite.js - Добавлены исходные SVG-иконки и сгенерированные спрайты - Добавлен модуль src/shared/sprites/icons.generated.ts - Добавлены глобальные стилевые токены: variables.css, media.css - Применён медиа-токен в src/screens/home/styles/home.module.css - Добавлен AGENTS.md с инструкциями для AI-ассистента
Next.js Template
Шаблон проекта на Next.js, построенный по стайлгайду.
Стек
- Next.js 16 — фреймворк
- React 19 / TypeScript 5 — UI и типизация
- Mantine UI 8 — компоненты
- Zustand 5 — глобальное состояние
- SWR 2 — получение данных
- PostCSS Modules — стили
- Biome — линтер и форматтер
- clsx — конкатенация CSS-классов
Архитектура
Проект использует кастомизированный FSD (Feature-Sliced Design):
src/
├── app/ # Роутинг Next.js, провайдеры, глобальные стили
├── screens/ # Собранные страницы (UI)
├── layouts/ # Каркасы и шаблоны страниц
├── widgets/ # Крупные самостоятельные блоки интерфейса
├── features/ # Пользовательские сценарии
├── entities/ # Бизнес-сущности
└── shared/ # Переиспользуемый код (UI, утилиты, типы)
Зависимости идут строго сверху вниз: app -> screens -> layouts -> widgets -> features -> entities -> shared.
Быстрый старт
npx tiged git@gromlab.ru:templates/nextjs.git my-app
cd my-app
npm install
npm run dev
Генерация кода
Модули создаются из шаблонов .templates/:
npx @gromlab/create component button src/shared/ui
npx @gromlab/create feature auth src/features
npx @gromlab/create widget header src/widgets
npx @gromlab/create entity user src/entities
npx @gromlab/create layout admin src/layouts
npx @gromlab/create screen profile src/screens
npx @gromlab/create store auth src/shared/model
Скрипты
| Команда | Описание |
|---|---|
npm run dev |
Запуск dev-сервера |
npm run build |
Сборка для продакшена |
npm run start |
Запуск продакшен-сервера |
npm run lint |
Проверка кода (Biome) |
npm run format |
Форматирование кода (Biome) |