Перейти к основному содержимому

Использование с 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

Открыть в StackBlitz

См. также