Как исправить проблему с маршрутизатором приложений NextJS и FSD
5 апреля 2024 г.Введение
Тем, кто никогда не работал с Feature-Sliced Design, также известным как FSD, я рекомендую сначала прочитать мою статью о FSD.
Многие разработчики сталкивались с проблемой при запуске проекта с использованием NextJS с FSD, тратя время на то, чтобы правильно объединить NextJS и FSD для совместной работы, особенно с использованием NextJS App Router.
В этой статье описывается, как заставить NextJS App Router работать с методологией FSD.
Проблема
NextJS App Router ожидает, что файлы в папке app соответствуют URL-адресам. Этот механизм маршрутизации не соответствует концепции FSD, поскольку в таком механизме маршрутизации невозможно поддерживать плоскую структуру среза.
Подход
Подход довольно прост. Вам нужно просто переместить папку NextJS app в корневую папку проекта и импортировать страницы FSD в папку NextJS app. При этом структура проекта FSD сохраняется в папке src.
├── app # NextJS app folder
├── src
│ ├── app # FSD app folder
│ ├── entities
│ ├── features
│ ├── pages
│ ├── shared
│ ├── widgets
Вот и все! Проблема объединения NextJS App Router и FSD решена!
См. также
Я настоятельно рекомендую прочитать официальную статью документации FSD о использовании с NextJS
Оригинал