Feature-Sliced Design

Слои, слайсы, сегменты, правило импортов и FSD с Next.

Обновлено 8 октября 2026 г.

Что такое Feature-Sliced Design

Feature-Sliced Design (FSD) — методология архитектуры фронтенда со строгими правилами о том, куда класть код и кто что может импортировать. Код делится по тому, насколько он специфичен для бизнеса — от страниц (очень специфичных) до утилит (общих).

Feature-Sliced Design за 1 минуту

FSD организует код на 3 уровнях: слои (layers) → слайсы (slices) → сегменты (segments).

src/
- app/глобальная настройка: провайдеры, стили, инициализация
- views/страницы (в FSD «pages»; переименовано, чтобы не путать с Next)
- widgets/крупные составные блоки UI: шапка, сайдбар, playground
- features/действия пользователя с бизнес-ценностью: run-exercise, add-to-cart
- entities/бизнес-сущности: user, lesson, product, progress
- shared/общий код без бизнеса: ui kit, lib, api client, config

Золотое правило

Слой может импортировать только из слоёв ниже себя.

views→widgets→features→entities→shared

features/run-exercise может использовать entities/exercise ✓
entities/exercise НЕ может использовать features/... ✗
Два слайса одного слоя не импортируют друг друга (features/a ✗→ features/b). Их объединяют уровнем выше (widget/view).

Слайсы и сегменты

Слайс = одно понятие (entities/lesson). Внутри — сегменты по технической роли:

Сегмент	Содержит
`ui/`	компоненты
`model/`	типы, состояние, стор, хуки с логикой
`api/`	запросы, query, server actions
`lib/`	хелперы этого слайса
`config/`	константы

Как мы используем его в этом проекте

app/[locale]/[topic]/[lesson]/page.tsxтолько собирает view
src/
- views/lesson/ui/lesson-view.tsx
- widgets/playground/ui/playground.tsx
- features/run-exercise/lib/run-js.ts
- entities/lesson/
  - api/lesson-api.ts
  - ui/lesson-content.tsx

Наше соглашение: без index.ts, который реэкспортирует, — импортируем прямо из файла, с описательными именами в kebab-case. Официальный FSD рекомендует index.ts как публичный API каждого слайса; мы от него отказываемся ради более лёгкого поиска, быстрого dev-сервера и нуля случайных циклических зависимостей. Цена: дисциплина «не импортируй внутренние детали» лежит на вас, а не на структуре.

FSD + Next App Router

Корневая папка app/ — это роутинг Next: тонкие файлы, которые импортируют из views.
Слой FSD pages → мы называем его views (чтобы не путать с Pages Router).
Слой FSD app (провайдеры, глобальный CSS) может жить в app/layout.tsx или в src/app.

Плюсы / минусы

Плюсы	Минусы
понятные правила: знаете, куда положить что угодно	кривая обучения, «это entity или feature?»
нет циклических импортов	слишком много для маленьких проектов
масштабируется на большие команды	много переходов между папками
удалить фичу = удалить папку	нужен линтер (Steiger), чтобы оставалось чисто

Коротко

6 слоёв от специфичного к общему: app → views → widgets → features → entities → shared.
Импорты только вниз; слайсы одного слоя не импортируют друг друга.
У нас: без barrel-файлов, описательные файлы в kebab-case, корневой app/ — только для роутинга.

Официальные источники

Упражнения

#1Правило импортов

Напишите canImport(from, to) для путей вида 'features/run-exercise' или 'shared'. Порядок: app > views > widgets > features > entities > shared. Разрешено только в нижний слой или внутри того же слайса. Между разными слайсами одного слоя → запрещено. У shared и app нет слайсов.

⌘ Enter запуск

○features → entities ✓
○entities → features ✗
○features/a → features/b ✗, тот же слайс ✓

#2Какой слой?

Напишите layerOf(description) по ключевым словам: 'page' → 'views', 'block' → 'widgets', 'action' → 'features', 'concept' → 'entities', иначе 'shared'.