Ответ
Да, FSD (Feature-Sliced Design) отлично подходит для Next.js. Вот как я бы организовал структуру:
src/
├── app/ # Next.js 13+ app router
├── pages/ # (опционально) для pages router
├── features/ # фичи (авторизация, профиль и т.д.)
│ ├── auth/ # пример фичи
│ │ ├── api/ # API-логика
│ │ ├── ui/ # UI компоненты
│ │ └── model/ # бизнес-логика
├── entities/ # сущности (User, Product)
├── widgets/ # сложные UI-блоки
├── shared/ # переиспользуемый код
│ ├── ui/ # UI-кит (кнопки, инпуты)
│ ├── lib/ # утилиты/хелперы
│ └── api/ # базовые API-настройки
└── styles/ # глобальные стилиКлючевые моменты:
- Разделение по бизнес-логике, а не по типам файлов
- features/ содержит полноценные фичи с собственной логикой
- entities/ для независимых бизнес-сущностей
- shared/ для переиспользуемого кода
Пример фичи авторизации:
// features/auth/ui/LoginForm.tsx
export const LoginForm = () => {
const { login } = useAuth(); // из features/auth/model
return <form onSubmit={login}>...</form>;
}Такой подход улучшает масштабируемость и изолирует изменения.