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

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

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

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

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

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

Роутер app

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Специальные файлы

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

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

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

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

1. layout.js
2. template.js
3. error.js (граница ошибок React)
4. loading.js (граница Suspense React)
5. not-found.js (граница ошибок React)
6. page.js или вложенный layout.js

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

Совмещение файлов

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

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

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

Продвинутые шаблоны маршрутизации

App Router также предоставляет набор соглашений для реализации более сложных шаблонов маршрутизации:

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

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

Следующие шаги

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