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

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

Middleware​

Если вы используете middleware в проекте, его также нужно переместить из src в корень проекта. Иначе NextJS просто не увидит его — middleware должен находиться строго в корне рядом с app или pages.

См. также​