Что такое архитектура FSD и как она используется в приложении

Что проверяют

Знаете ли вы FSD как методологию со слоями и строгим правилом импортов, а не как «папку на каждую фичу». Следом обычно дают конкретный компонент и спрашивают, в какой слой его положить, например карточку товара или кнопку «Добавить в корзину».

Как отвечать

Feature-Sliced Design организует фронтенд-код на трёх уровнях: слои, слайсы, сегменты. Слои сверху вниз:

• app: инициализация, провайдеры, роутинг, глобальные стили;
• pages: страницы целиком;
• widgets: крупные самостоятельные блоки интерфейса, например шапка или лента;
• features: действия пользователя, которые приносят ему пользу: вход, добавление в корзину, отправка отзыва;
• entities: бизнес-сущности вроде user и product, их модель и базовое отображение;
• shared: код без бизнес-смысла: UI-кит, API-клиент, утилиты, конфиг.

Слой processes признан устаревшим. Внутри слоя код делится на слайсы по предметной области (features/add-to-cart), внутри слайса на сегменты ui, model, api, lib, config.

Главное правило: модуль импортирует только из слоёв ниже своего, а слайсы одного слоя друг о друге не знают. Каждый слайс отдаёт наружу публичный API через index.ts, импорты в обход него запрещены. Соблюдение проверяют линтером: официальным Steiger или eslint-plugin-boundaries.

Про использование рассказывайте на своём проекте: какие слои реально завели, где живёт состояние (стор Zustand или слайс Redux Toolkit в сегменте model), как решали связи между сущностями (для этого в FSD есть нотация @x). В Next.js имена слоёв app и pages конфликтуют с роутингом фреймворка, их разводят по разным каталогам.

Где спотыкаются

Сводят FSD к раскладке по фичам и не называют правило импортов. Без него это просто папки.

Путают entities и features. Карточка товара это отображение сущности, ей место в entities, а кнопка «В избранное», которая меняет данные, это уже feature.

Заводят все слои на небольшом проекте и дробят код заранее. В версии 2.1 методология сама рекомендует подход «сначала страницы»: держать код в pages, пока он не понадобится где-то ещё, и только тогда выносить ниже.