Основы маршрутизации

Остовом любого приложения является маршрутизация. На этой странице вы познакомитесь с основными понятиями маршрутизации для веб-приложений и способами обработки маршрутизации в Next.js.

Терминология

Сначала вы увидите эти термины, используемые в документации. Вот краткая справка:

• Дерево: Конвенция для визуализации иерархической структуры. Например, дерево компонентов с родительскими и дочерними компонентами, структура папок и т.д.
• Поддерево: Часть дерева, начинающаяся с нового корня (первого) и заканчивающаяся листьями (последними).
• Корень: Первый узел в дереве или поддереве, такой как корневой макет.
• Лист: Узлы в поддереве, не имеющие дочерних узлов, такие как последний сегмент в пути URL.

• Сегмент URL: Часть пути URL, ограниченная слешами.
• Путь URL: Часть URL, следующая за доменом (составленная из сегментов).

Маршрутизатор приложений

В версии 13 Next.js представил новый маршрутизатор приложений, построенный на основе React Server Components, который поддерживает общие макеты, вложенную маршрутизацию, состояния загрузки, обработку ошибок и многое другое.

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

Важно знать: Маршрутизатор приложений имеет приоритет над маршрутизатором страниц. Маршруты в разных папках не должны соответствовать одному и тому же пути URL, и это вызовет ошибку во время сборки, чтобы предотвратить конфликт.

По умолчанию, компоненты внутри app являются React Server Components. Это оптимизация производительности и позволяет легко их адаптировать, а также можно использовать Client Components.

Рекомендация: Проверьте страницу Сервера, если вы новичок в Server Components.

Роли папок и файлов

Next.js использует основанный на файловой системе маршрутизатор, где:

• Папки используются для определения маршрутов. Маршрут — это единственный путь вложенных папок, следуя иерархии файловой системы от корневой папки до конечной листовой папки, которая включает файл page.js. См. Определение маршрутов.
• Файлы используются для создания пользовательского интерфейса, отображаемого для сегмента маршрута. См. специальные файлы.

Сегменты маршрутов

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

Вложенные маршруты

Чтобы создать вложенный маршрут, вы можете вложить папки друг в друга. Например, вы можете добавить новый маршрут /dashboard/settings путем вложения двух новых папок в папку app.

Маршрут /dashboard/settings состоит из трех сегментов:

• / (Корневой сегмент)
• dashboard (Сегмент)
• settings (Сегмент листа)

Правила именования файлов

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

Важно знать: .js, .jsx, или .tsx расширения файлов могут использоваться для специальных файлов.

Иерархия компонентов

Компоненты React, определенные в специальных файлах сегмента маршрута, отображаются в определенной иерархии:

• layout.js
• template.js
• error.js (граница обработки ошибок React)
• loading.js (граница отложенной загрузки React)
• not-found.js (граница обработки ошибок React)
• page.js или вложенные layout.js

Во вложенном маршруте компоненты сегмента будут вложены внутри компонентов родительского сегмента.

Совмещение

В дополнение к специальным файлам у вас есть возможность разместить собственные файлы (например, компоненты, стили, тесты и т. д.) внутри папок в папке app.

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

Узнайте больше о Организации проекта и совмещении.

Расширенные схемы маршрутизации

Маршрутизатор приложений также предоставляет набор соглашений, которые помогут вам реализовать более сложные схемы маршрутизации. К ним относятся:

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

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

Дальнейшие шаги

Теперь, когда вы понимаете основы маршрутизации в Next.js, перейдите по приведенным ниже ссылкам, чтобы создать свои первые маршруты: