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

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