Files

S.Gromov e337ec78fa docs(architecture): переработать раздел архитектуры

- заменил описание слоёв и модулей FSD на новую модель с компонентами
- добавил раздел 'Что важно знать' с пояснением что архитектура надстройка над FSD
- добавил описание master component и его правил
- добавил раздел сегментов с таблицей
- убрал дублирующиеся правила зависимостей и публичного API

2026-03-31 15:17:47 +03:00

4.3 KiB

Raw Blame History

title

title
Архитектура

Архитектура

Этот раздел описывает архитектуру проекта: из каких слоёв состоит приложение, как организован код внутри слоёв и какие правила управляют зависимостями.

Что важно знать

Проект использует FSD (Feature-Sliced Design) как базовую архитектурную методологию. Если вы не знакомы с FSD — начните с официальной документации.

Данная архитектура является надстройкой над FSD, а не заменой. Все правила FSD действуют по умолчанию — если правило явно не переопределено в этом документе, применяется стандарт FSD. Единственное отклонение: вместо слайсов используются компоненты.

Слои

Слой	Назначение
`app`	Инициализация: провайдеры, стили, роутинг Next.js
`screens`	Сборка страницы из виджетов и фич
`layouts`	Каркасы и шаблоны страниц
`widgets`	Крупные блоки интерфейса
`features`	Пользовательские сценарии и действия
`entities`	Бизнес-сущности
`shared`	Утилиты, UI-кит, инфраструктура

Слой pages не используется — конфликтует с Next.js. Вместо него: screens и layouts.

Зависимости идут строго сверху вниз: app → screens → layouts → widgets → features → entities → shared.

Компоненты

Компонент — стандартная UI-единица, такая же как в любом React-проекте. Содержит корневой .tsx, публичный API (index.ts) и сегменты.

Компоненты располагаются в:

shared/ui/ — переиспользуемые компоненты без бизнес-контекста
ui/ внутри master component'а — дочерние компоненты (подробнее в разделе Master component)

Сегменты

Сегмент — папка внутри компонента, группирующая код по техническому назначению. Набор не фиксирован.

Сегмент	Назначение
`styles/`	Стили
`types/`	Интерфейсы, типы, enums, DTO
`ui/`	Компоненты, провайдеры и любые другие элементы интерфейса
`stores/`	Сторы состояния
`hooks/`	React-хуки
`services/`	Внешние источники данных
`lib/`	Утилиты
`helpers/`	Вспомогательные функции
`config/`	Константы, конфигурация

Master component

Master component — это обычный компонент, на который наложен ряд дополнительных правил. Эти правила определяют его место в архитектуре и границы зависимостей.

Может располагаться только в слоях: screens, layouts, widgets, features, entities
Импортирует master component'ы только из слоёв ниже по иерархии
Корневой .tsx именуется с суффиксом слоя: header.widget.tsx, auth.feature.tsx
Корневой .tsx необязателен — index.ts может экспортировать несколько сущностей напрямую
Дочерние компоненты в ui/ доступны снаружи только через index.ts
Компоненты внутри одного ui/ могут импортировать друг друга

4.3 KiB Raw Blame History Unescape Escape