Организация проекта и совместное размещение файлов

Помимо соглашений о папках и файлах маршрутизации, Next.js не навязывает конкретных правил по организации и совместному размещению файлов проекта.

На этой странице описано стандартное поведение и функции, которые можно использовать для организации проекта.

• Безопасное совместное размещение по умолчанию
• Функции организации проекта
• Стратегии организации проекта

Безопасное совместное размещение по умолчанию

В директории app иерархия вложенных папок определяет структуру маршрутов.

Каждая папка представляет сегмент маршрута, который сопоставляется с соответствующим сегментом в URL-пути.

Однако, несмотря на то, что структура маршрутов определяется через папки, маршрут не является общедоступным, пока в сегмент маршрута не добавлен файл page.js или route.js.

И даже когда маршрут становится общедоступным, клиенту отправляется только контент, возвращаемый page.js или route.js.

Это означает, что файлы проекта можно безопасно размещать внутри сегментов маршрутов в директории app, не опасаясь их случайного использования в маршрутизации.

Полезно знать:

• Это отличается от директории pages, где любой файл в pages считается маршрутом.
• Хотя вы можете совместно размещать файлы проекта в app, вы не обязаны это делать. При желании можно хранить их вне директории app.

Функции организации проекта

Next.js предоставляет несколько функций для организации проекта.

Приватные папки

Приватные папки можно создавать, добавляя к имени папки символ подчёркивания: _folderName

Это указывает, что папка является приватной деталью реализации и не должна учитываться системой маршрутизации, тем самым исключая папку и все её подпапки из маршрутизации.

Поскольку файлы в директории app могут быть безопасно размещены по умолчанию, приватные папки не обязательны для совместного размещения. Однако они могут быть полезны для:

• Разделения логики интерфейса и логики маршрутизации.
• Последовательной организации внутренних файлов в проекте и экосистеме Next.js.
• Сортировки и группировки файлов в редакторах кода.
• Избежания потенциальных конфликтов имён с будущими соглашениями Next.js о файлах.

Полезно знать

• Хотя это и не соглашение фреймворка, вы также можете пометить файлы вне приватных папок как "приватные", используя тот же шаблон с подчёркиванием.
• Вы можете создать сегменты URL, начинающиеся с подчёркивания, добавив к имени папки %5F (URL-кодированную форму подчёркивания): %5FfolderName.
• Если вы не используете приватные папки, полезно знать специальные соглашения Next.js о файлах, чтобы избежать неожиданных конфликтов имён.

Группы маршрутов

Группы маршрутов можно создавать, заключая папку в скобки: (folderName)

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

Группы маршрутов полезны для:

• Организации маршрутов в группы, например, по разделам сайта, назначению или командам.
• Включения вложенных макетов на одном уровне сегментов маршрута:
  • Создание нескольких вложенных макетов в одном сегменте, включая несколько корневых макетов
  • Добавление макета к подмножеству маршрутов в общем сегменте

Директория src

Next.js поддерживает хранение кода приложения (включая app) внутри опциональной директории src. Это отделяет код приложения от файлов конфигурации проекта, которые в основном находятся в корне проекта.

Алиасы путей модулей

Next.js поддерживает Алиасы путей модулей, которые упрощают чтение и поддержку импортов в глубоко вложенных файлах проекта.

// до
import { Button } from '../../../components/button'

// после
import { Button } from '@/components/button'

Стратегии организации проекта

Не существует "правильного" или "неправильного" способа организации файлов и папок в проекте Next.js.

В следующем разделе приведён общий обзор распространённых стратегий. Главный вывод — выбрать стратегию, которая подходит вам и вашей команде, и придерживаться её во всём проекте.

Полезно знать: В наших примерах ниже мы используем папки components и lib как обобщённые заполнители, их имена не имеют особого значения для фреймворка, и ваши проекты могут использовать другие папки, такие как ui, utils, hooks, styles и т. д.

Хранение файлов проекта вне app

Эта стратегия хранит весь код приложения в общих папках в корне проекта и оставляет директорию app исключительно для целей маршрутизации.

Хранение файлов проекта в корневых папках внутри app

Эта стратегия хранит весь код приложения в общих папках в корне директории app.

Разделение файлов проекта по функционалу или маршрутам

Эта стратегия хранит глобально общий код приложения в корневой директории app и разделяет более специфичный код приложения на сегменты маршрутов, которые его используют.