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

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

// before
import { Button } from '../../../components/button'
 
// after
import { Button } from '@/components/button'

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

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

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

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

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

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

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

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

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

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