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

Помимо соглашений о папках и файлах маршрутизации, 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 и разделение более специфичного кода по сегментам маршрутов, которые его используют.