Использование с 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
Другой способ решить проблему - переименовать слой pages
в структуре FSD, чтобы избежать конфликтов с папкой pages
NextJS.
Вы можете переименовать слой pages
в FSD в views
.
Таким образом, структура проекта в папке src
сохраняется без противоречий с требованиями NextJS.
├── app
├── entities
├── features
├── pages # Папка pages (NextJS)
├── views # Переименованная папка страниц FSD
├── shared
├── widgets
Учтите, что в этом случае рекомендуется задокументировать это переименование в видном месте — в README проекта или внутренней документации. Это переименование — часть "проектных знаний".
Отсутствие папки app
в NextJS
В NextJS ниже версии 13 нет явной папки app
, вместо этого NextJS предоставляет файл _app.tsx
,
который играет роль компонента обертывания для всех страниц проекта.
Импорт функциональности в pages/_app.tsx
Чтобы решить проблему отсутствия папки app
в структуре NextJS, вы можете создать компонент App
внутри слоя app
и импортировать компонент App
в pages/_app.tsx
, чтобы NextJS мог с ним работать.
Например:
// app/providers/index.tsx
const App = ({ Component, pageProps }: AppProps) => {
return (
<Provider1>
<Provider2>
<BaseLayout>
<Component {...pageProps} />
</BaseLayout>
</Provider2>
</Provider1>
);
};
export default App;
Затем вы можете импортировать компонент App
и глобальные стили проекта в pages/_app.tsx
следующим образом:
// pages/_app.tsx
import 'app/styles/index.scss'
export { default } from 'app/providers';
Работа с App Router
App Router стал стабильным в NextJS версии 13.4. App Router позволяет использовать папку app
для маршрутизации вместо папки pages
.
Для соответствия принципам FSD, вам следует обращаться с папкой app
NextJS так же, как рекомендуется
для устранения конфликта с папкой pages
NextJS.
Подход заключается в перемещении папки app
NextJS в корневую папку проекта и импорте страниц FSD в папку app
NextJS. Это сохраняет
структуру проекта FSD внутри папки src
. Вам также стоит добавить в корневую папку проекта папку pages
, потому что App Router совместим с Pages Router.
├── app # Папка app (NextJS)
├── pages # Пустая папка pages (NextJS)
│ ├── README.md # Описание того, зачем нужна эта папка
├── src
│ ├── app # Папка app (FSD)
│ ├── entities
│ ├── features
│ ├── pages # Папка pages (FSD)
│ ├── shared
│ ├── widgets