2026-04-02 17:01:22 +03:00
|
|
|
|
# Next.js Template
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
Шаблон проекта на Next.js, построенный по [стайлгайду](https://gromlab.ru/docs/nextjs-style-guide).
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
## Стек
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
- **Next.js 16** — фреймворк
|
|
|
|
|
|
- **React 19** / **TypeScript 5** — UI и типизация
|
|
|
|
|
|
- **Mantine UI 8** — компоненты
|
|
|
|
|
|
- **Zustand 5** — глобальное состояние
|
|
|
|
|
|
- **SWR 2** — получение данных
|
|
|
|
|
|
- **PostCSS Modules** — стили
|
|
|
|
|
|
- **Biome** — линтер и форматтер
|
|
|
|
|
|
- **clsx** — конкатенация CSS-классов
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
## Архитектура
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
refactor: привести шаблон к правилам стайлгайда
- Архитектура SLM: провайдеры перенесены в infrastructure/mantine, стили в shared/styles
- SVG-спрайты: переход на @gromlab/svg-sprites, добавлен preload в layout
- Стили: переменные и брейкпоинты приведены к базовому набору стайлгайда (rem, Mobile First)
- PostCSS: добавлены postcss-custom-media, postcss-nesting, autoprefixer, @csstools/postcss-global-data
- tsconfig: исправлен алиас shared/* → ./src/shared/*
- Удалены app/styles/, app/providers/, scripts/create-svg-sprite.js, public/img/sprites/
- README переписан на SLM-архитектуру
- Добавлены иконки: clipboard-tick, doctor, people, symptom
2026-04-30 19:24:40 +03:00
|
|
|
|
Проект использует SLM Design — модульную архитектуру с вертикальной организацией домена.
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
```
|
|
|
|
|
|
src/
|
refactor: привести шаблон к правилам стайлгайда
- Архитектура SLM: провайдеры перенесены в infrastructure/mantine, стили в shared/styles
- SVG-спрайты: переход на @gromlab/svg-sprites, добавлен preload в layout
- Стили: переменные и брейкпоинты приведены к базовому набору стайлгайда (rem, Mobile First)
- PostCSS: добавлены postcss-custom-media, postcss-nesting, autoprefixer, @csstools/postcss-global-data
- tsconfig: исправлен алиас shared/* → ./src/shared/*
- Удалены app/styles/, app/providers/, scripts/create-svg-sprite.js, public/img/sprites/
- README переписан на SLM-архитектуру
- Добавлены иконки: clipboard-tick, doctor, people, symptom
2026-04-30 19:24:40 +03:00
|
|
|
|
├── app/ # Роутинг Next.js и точка входа приложения
|
|
|
|
|
|
├── layouts/ # Каркасы страниц (header, footer, sidebar)
|
|
|
|
|
|
├── screens/ # Контент конкретных страниц
|
|
|
|
|
|
├── widgets/ # Составные блоки интерфейса, не привязанные к домену
|
|
|
|
|
|
├── business/ # Бизнес-домены (auth, catalog, orders)
|
|
|
|
|
|
├── infrastructure/ # Техсервисы (theme, i18n, API-адаптеры)
|
|
|
|
|
|
├── ui/ # UI-кит без бизнес-логики
|
|
|
|
|
|
└── shared/ # Общие ресурсы (утилиты, типы, стили, спрайты)
|
2026-04-02 17:01:22 +03:00
|
|
|
|
```
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
refactor: привести шаблон к правилам стайлгайда
- Архитектура SLM: провайдеры перенесены в infrastructure/mantine, стили в shared/styles
- SVG-спрайты: переход на @gromlab/svg-sprites, добавлен preload в layout
- Стили: переменные и брейкпоинты приведены к базовому набору стайлгайда (rem, Mobile First)
- PostCSS: добавлены postcss-custom-media, postcss-nesting, autoprefixer, @csstools/postcss-global-data
- tsconfig: исправлен алиас shared/* → ./src/shared/*
- Удалены app/styles/, app/providers/, scripts/create-svg-sprite.js, public/img/sprites/
- README переписан на SLM-архитектуру
- Добавлены иконки: clipboard-tick, doctor, people, symptom
2026-04-30 19:24:40 +03:00
|
|
|
|
Зависимости идут строго сверху вниз: `app` → `[layouts | screens]` → `widgets` → `business` → `infrastructure` → `ui` → `shared`.
|
|
|
|
|
|
|
|
|
|
|
|
Подробнее: [Архитектура SLM](./ai/nextjs-style-guide/basics/architecture/index.md).
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
## Быстрый старт
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
```bash
|
|
|
|
|
|
npx tiged git@gromlab.ru:templates/nextjs.git my-app
|
|
|
|
|
|
cd my-app
|
|
|
|
|
|
npm install
|
|
|
|
|
|
npm run dev
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
## Генерация кода
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
Модули создаются из шаблонов `.templates/`:
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
```bash
|
refactor: привести шаблон к правилам стайлгайда
- Архитектура SLM: провайдеры перенесены в infrastructure/mantine, стили в shared/styles
- SVG-спрайты: переход на @gromlab/svg-sprites, добавлен preload в layout
- Стили: переменные и брейкпоинты приведены к базовому набору стайлгайда (rem, Mobile First)
- PostCSS: добавлены postcss-custom-media, postcss-nesting, autoprefixer, @csstools/postcss-global-data
- tsconfig: исправлен алиас shared/* → ./src/shared/*
- Удалены app/styles/, app/providers/, scripts/create-svg-sprite.js, public/img/sprites/
- README переписан на SLM-архитектуру
- Добавлены иконки: clipboard-tick, doctor, people, symptom
2026-04-30 19:24:40 +03:00
|
|
|
|
npx @gromlab/create module auth src/business
|
2026-04-02 17:01:22 +03:00
|
|
|
|
npx @gromlab/create widget header src/widgets
|
|
|
|
|
|
npx @gromlab/create layout admin src/layouts
|
|
|
|
|
|
npx @gromlab/create screen profile src/screens
|
refactor: привести шаблон к правилам стайлгайда
- Архитектура SLM: провайдеры перенесены в infrastructure/mantine, стили в shared/styles
- SVG-спрайты: переход на @gromlab/svg-sprites, добавлен preload в layout
- Стили: переменные и брейкпоинты приведены к базовому набору стайлгайда (rem, Mobile First)
- PostCSS: добавлены postcss-custom-media, postcss-nesting, autoprefixer, @csstools/postcss-global-data
- tsconfig: исправлен алиас shared/* → ./src/shared/*
- Удалены app/styles/, app/providers/, scripts/create-svg-sprite.js, public/img/sprites/
- README переписан на SLM-архитектуру
- Добавлены иконки: clipboard-tick, doctor, people, symptom
2026-04-30 19:24:40 +03:00
|
|
|
|
npx @gromlab/create module button src/ui
|
|
|
|
|
|
npx @gromlab/create store auth src/shared
|
2026-04-02 17:01:22 +03:00
|
|
|
|
```
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
## Скрипты
|
init: шаблон Next.js приложения
- Next.js 16 + React 19 + TypeScript
- Mantine UI + PostCSS Modules
- Biome (линтинг и форматирование)
- Zustand, SWR
- Структура FSD (screens, widgets, features, entities, shared)
- Шаблоны генерации (.templates/): component, screen, feature, widget, entity, layout, store
- Конфигурация VS Code (расширения, настройки)
- CSS-токены (цвета, отступы, радиусы, медиа)
- Open Graph метаданные
- Тестовый home screen с Mantine
2026-03-28 22:11:43 +03:00
|
|
|
|
|
2026-04-02 17:01:22 +03:00
|
|
|
|
| Команда | Описание |
|
|
|
|
|
|
|---|---|
|
|
|
|
|
|
| `npm run dev` | Запуск dev-сервера |
|
|
|
|
|
|
| `npm run build` | Сборка для продакшена |
|
|
|
|
|
|
| `npm run start` | Запуск продакшен-сервера |
|
|
|
|
|
|
| `npm run lint` | Проверка кода (Biome) |
|
|
|
|
|
|
| `npm run format` | Форматирование кода (Biome) |
|
refactor: привести шаблон к правилам стайлгайда
- Архитектура SLM: провайдеры перенесены в infrastructure/mantine, стили в shared/styles
- SVG-спрайты: переход на @gromlab/svg-sprites, добавлен preload в layout
- Стили: переменные и брейкпоинты приведены к базовому набору стайлгайда (rem, Mobile First)
- PostCSS: добавлены postcss-custom-media, postcss-nesting, autoprefixer, @csstools/postcss-global-data
- tsconfig: исправлен алиас shared/* → ./src/shared/*
- Удалены app/styles/, app/providers/, scripts/create-svg-sprite.js, public/img/sprites/
- README переписан на SLM-архитектуру
- Добавлены иконки: clipboard-tick, doctor, people, symptom
2026-04-30 19:24:40 +03:00
|
|
|
|
| `npm run sprite` | Генерация SVG-спрайтов |
|