Организация проекта в FAiL

Структура (общее представление)

Для ~/src/ (изначальная для FAiL):

• node_modules
• .next | dist | build
• docs
• public
• src
  • app
    • (home)
    • globals.css
    • layout.tsx
  • features
  • widgets
    • ui
  • entities
  • shared
• package.json
• .gitignore
• LICENSE
• README.md

Основные каталоги

Речь не про App, Shared, Widgets или подобным, а про каталоги в рутовой области.

Данная область имеет структуру, схожую с:

• docs

  Директория с документацией (может быть вынесено).

• public

  Папка со статичными ресурсами сервера. Внутри Вы можете встретить favicon.ico и другие интересности, если, конечно, они там есть 😅

• src (рабочая)

  Рабочая директория со всеми основными файлами.

  Этого каталога может не быть, если вы используйте в качестве рабочей папки~/, а не ~/src.

• .next и node_modules

  Первая папка содержит билд проекта, вторая зависимости (“Да ладно!”). Они обязаны быть включены в .gitignore файл.

Next.js | Source Folder

Структура (архитектура ) проекта в Next.js при использовании App Router обычно имеет следующий или схожий с ним вид (рассмотрим внутри src каталога):

• app

  Сердце вашего сайта! Тут и страницы, и слои, и ассеты к ним.

• shared/config

  Конфигикурации приложения. Этот каталог может содержаться на уровень выше, но в рамках нашего проекта – внутри src.

• ...security (файлы)

  Сюда обычно входят такие файлы, как middleware.ts и auth.ts.

Next.js | Роутинг

Вам уже известно, как работает App Router  в Next.js. Если нет, то почитайте, но а сейчас мы рассмотрим только ту часть, которая нам действительно необходима.

Иерархия внутри src/app выглядит следующим образом:

• layout.tsx (файл)

  Рутовый слой.

• page.tsx (файл)

  Главная страница приложения, отображаемая через URL ~/. Обычно выносится в подкаталог по типу “(home)” или “(landing)” (~/src/app/(home)/page.tsx).

• ...pages

  Папки с вложенными page.tsx и, при необходимости, layout.tsx. Помимо этого может содержать _ui каталог с компонентами страницы, или _lib, а также такие же вложенные подпапки.

  Обратите внимание, что большие и/или часто переиспользуемые компоненты и их логику стоит выносить в такие папки, как widgets и shared.

Next.js | Вложенность

Я не придумал, как ещё обозвать этот раздел, кроме как “вложенность” или “дочерние папки страницы”. Хорошо, он будет о том, как Вы догадались, о каталогах внутри src/app/[page], где page – имя страницы (home или profile, к примеру).

Каталог может содержать внутри себя:

• _ui

  Компоненты страницы и её составляющие: форматеры данных, стили.

• _api

  Код, взаимодействующий с Backend-частью приложения и другие связанные данные с ним, как типы данных, модели.

• _lib

  Библиотечный код, который нужен другим модулям в сегменте.

• _hooks

  Специфичные для страницы или слоя хуки React. Обычно туда выносятся хуки со вспомогательной логикой, в то время как в тот же каталог _lib что-то более “обобщённое”.

• _config

  Конфигурация свойственная только для страницы и её компонентов.