Будешь ли организовывать проект с Next.js с нуля на FSD

Ответ

Да, 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>;
}

Такой подход улучшает масштабируемость и изолирует изменения.