Роутер приложения (App Router)
Роутер приложения (App Router) в Next.js представляет новую модель для создания приложений с использованием последних возможностей React, таких как серверные компоненты (Server Components), потоковая передача с Suspense (Streaming with Suspense) и серверные действия (Server Actions).
Начните работу с роутером приложения, создав свою первую страницу.
Часто задаваемые вопросы
Как получить доступ к объекту запроса в макете?
Намеренно нельзя получить доступ к исходному объекту запроса. Однако вы можете получить доступ к headers и cookies через функции, доступные только на сервере. Также можно устанавливать cookies.
Макеты (Layouts) не перерисовываются. Они могут кэшироваться и повторно использоваться, чтобы избежать ненужных вычислений при переходе между страницами. Ограничивая доступ макетов к исходному запросу, Next.js предотвращает выполнение потенциально медленного или ресурсоемкого пользовательского кода внутри макета, что могло бы негативно сказаться на производительности.
Такой дизайн также обеспечивает согласованное и предсказуемое поведение макетов на разных страницах, что упрощает разработку и отладку.
В зависимости от шаблона интерфейса, который вы создаете, параллельные маршруты (Parallel Routes) позволяют отображать несколько страниц в одном макете, при этом страницы имеют доступ к сегментам маршрута и параметрам URL.
Как получить доступ к URL на странице?
По умолчанию страницы являются серверными компонентами (Server Components). Вы можете получить доступ к сегментам маршрута через проп params и параметрам URL через проп searchParams для конкретной страницы.
Если вы используете клиентские компоненты (Client Components), можно применять usePathname, useSelectedLayoutSegment и useSelectedLayoutSegments для более сложных маршрутов.
Кроме того, в зависимости от шаблона интерфейса, параллельные маршруты (Parallel Routes) позволяют отображать несколько страниц в одном макете, при этом страницы имеют доступ к сегментам маршрута и параметрам URL.
Как выполнить перенаправление из серверного компонента?
Вы можете использовать redirect для перенаправления со страницы на относительный или абсолютный URL. redirect выполняет временное перенаправление (307), а permanentRedirect — постоянное (308). При использовании этих функций во время потоковой передачи интерфейса они вставят мета-тег для выполнения перенаправления на стороне клиента.
Как реализовать аутентификацию с роутером приложения?
Вот несколько распространенных решений для аутентификации, поддерживающих роутер приложения:
Как установить cookies?
Вы можете устанавливать cookies в серверных действиях (Server Actions) или обработчиках маршрутов (Route Handlers) с помощью функции cookies.
Поскольку HTTP не позволяет устанавливать cookies после начала потоковой передачи, вы не можете устанавливать cookies напрямую со страницы или макета. Также можно устанавливать cookies из Middleware.
Как создать мультитенантные приложения?
Если вы хотите создать одно приложение Next.js, обслуживающее нескольких клиентов (тенантов), мы подготовили пример, демонстрирующий рекомендуемую архитектуру.
Как инвалидировать кэш роутера приложения?
В Next.js существует несколько уровней кэширования, а значит, есть несколько способов инвалидации разных частей кэша. Подробнее о кэшировании.
Есть ли комплексные open-source приложения, построенные на роутере приложения?
Да. Вы можете посмотреть Next.js Commerce или Platforms Starter Kit — два крупных примера использования роутера приложения с открытым исходным кодом.