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

Маршрутизатор приложений Next.js представляет новую модель для создания приложений с использованием последних функций React, таких как Компоненты сервера, Потоковая передача данных с помощью Suspense и Серверные действия.

Начните работу с маршрутизатором приложений, создав свою первую страницу.

Часто задаваемые вопросы

Как получить доступ к объекту запроса в макете?

Прямого доступа к объекту запроса нет. Однако вы можете получить доступ к headers и cookies через функции, работающие только на сервере. Вы также можете установить куки.

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

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

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

Как получить доступ к URL на странице?

По умолчанию страницы являются компонентами сервера. Вы можете получить доступ к сегментам маршрута через свойство params, а к параметрам URL — через свойство searchParams для данной страницы.

Если вы используете клиентские компоненты, вы можете использовать usePathname, useSelectedLayoutSegment и useSelectedLayoutSegments для более сложных маршрутов.

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

Как перенаправить с компонента сервера?

Вы можете использовать redirect для перенаправления со страницы на относительный или абсолютный URL. redirect — это временное перенаправление (307), а permanentRedirect — постоянное (308). При использовании этих функций при потоковой передаче пользовательского интерфейса они вставят тег meta для перенаправления на стороне клиента.

Как обработать аутентификацию с маршрутизатором приложений?

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

NextAuth.js
Clerk
Lucia
Auth0
Stytch
Kinde
Или ручная обработка сессий или JWT

Как установить куки?

Вы можете установить куки в Серверных действиях или Обработчиках маршрутов с помощью функции cookies.

Поскольку HTTP не позволяет устанавливать куки после начала потоковой передачи, вы не можете устанавливать куки непосредственно со страницы или макета. Вы также можете устанавливать куки из Средств-посредников.

Как создать приложения с несколькими арендаторами?

Если вы хотите создать одно приложение Next.js, обслуживающее нескольких арендаторов, у нас есть пример с рекомендуемой архитектурой.

Как сделать недействительным кэш маршрутизатора приложений?

В Next.js существует несколько уровней кэширования, и, следовательно, несколько способов сделать недействительными различные части кэша. Узнайте больше о кэшировании.

Есть ли какие-либо комплексные открытые приложения, созданные на основе маршрутизатора приложений?

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