Workflow

Порядок действий при разработке — от создания проекта до реализации фич.

Начало работы

Подготовка окружения перед началом разработки.

1. Открыть проект в VS Code.
2. Установить рекомендуемые расширения (редактор предложит автоматически).
3. Ознакомиться со стеком: Next.js (App Router), Mantine, Zustand, FSD.

Создание проекта

Инициализация нового проекта из готового шаблона.

1. Создать проект из шаблона:

   npx tiged git@gromlab.ru:templates/nextjs.git my-app
   cd my-app
   npm install

2. Проект готов к разработке — стек, структура FSD, конфигурация редактора и шаблоны генерации уже настроены.

Генерация кода

Создание модулей из шаблонов .templates/ вместо ручного создания файлов.

1. Определить тип модуля и соответствующий шаблон:

   Модуль	Слой	Шаблон
   Компонент	shared/ui/	component
   Фича	features/	feature
   Виджет	widgets/	widget
   Сущность	entities/	entity
   Layout	layouts/	layout
   Экран	screens/	screen
   Стор	model/	store

2. Сгенерировать модуль из шаблона.

3. Если подходящего шаблона нет — сначала создать шаблон, затем использовать.

Ручное создание файловой структуры модулей запрещено.

Добавление страницы

Создание нового маршрута: экран + точка входа для роутинга.

1. Сгенерировать экран из шаблона screen в src/screens/.
2. Заполнить экран логикой и стилями.
3. Создать page.tsx в нужном маршруте src/app/.

page.tsx — тонкая обёртка: только metadata и рендер экрана. Логика, стили и хуки размещаются в экране, не в page.tsx.

Добавление UI-модуля

Создание компонента, фичи, виджета, сущности или layout.

1. Сгенерировать модуль из соответствующего шаблона в целевой слой.
2. Заполнить модуль логикой и стилями.
3. Дочерние компоненты — генерировать из шаблона component в папку ui/ внутри родителя.

Дочерние компоненты не экспортируются через index.ts родителя.

Стилизация

Выбор инструмента стилизации по приоритету.

1. Использовать Mantine-компоненты и их пропсы.
2. Если Mantine не покрывает — использовать CSS-токены (--color-*, --space-*, --radius-*).
3. Если нужна кастомная стилизация — PostCSS Modules.

Инлайн-стили (style), магические значения и глобальные стили вне app/styles/ запрещены.

Получение данных

Раздел в разработке — SWR, генерация API-клиентов, сокеты.

Управление состоянием

Раздел в разработке — когда создавать стор, что хранить локально и глобально.

Локализация

Раздел в разработке — переводы и i18next.