Использование с NextJS
В NextJS проекте возможно реализовать FSD, но возникают конфликты из-за различий между требованиями к структуре проекта NextJS и принципами FSD в двух пунктах:
- Маршрутизация файлов в слое
pages
- Конфликт или отсутствие слоя
app
в NextJS
Конфликт между FSD и NextJS в слое pages
NextJS предлагает использовать папку pages
для определения маршрутов приложения. NextJS ожидает, что файлы в папке pages
будут соответствовать URL-адресам.
Этот механизм маршрутизации не соответствует концепции FSD, поскольку в таком механизме маршрутизации не представляется возможным соблюсти плоскую структуру слайсов.
Перемещ ение папки pages
NextJS в корневую папку проекта (рекомендуется)
Подход заключается в перемещении папки pages
NextJS в корневую папку проекта и импорте страниц FSD в папку pages
NextJS. Это сохраняет
структуру проекта FSD внутри папки src
.
├── pages # Папка pages (NextJS)
├── src
│ ├── app
│ ├── entities
│ ├── features
│ ├── pages # Папка pages (FSD)
│ ├── shared
│ ├── widgets
Переименование папки pages
в структуре FSD
Другой способ решить проблему - переименовать слой app
в структуре FSD, чтобы избежать конфликтов с папкой pages
NextJS.
Вы можете переименовать слой app
в FSD в views
.
Таким образом, структура проекта в папке src
сохраняется без противоречий с требованиями NextJS.
├── app
├─ ─ entities
├── features
├── pages # Папка pages (NextJS)
├── views # Переименованная папка страниц FSD
├── shared
├── widgets
Учтите, что в этом случае рекомендуется задокументировать это переименование в видном месте — в README проекта или внутренней документации. Это переименование — часть "проектных знаний".