Роутер приложения (App Router)
Роутер приложения (App Router) в Next.js — это новая парадигма для создания приложений с использованием последних функций React. Если вы уже знакомы с Next.js, вы обнаружите, что App Router — это естественное развитие существующей файловой системы маршрутизации в роутере страниц (Pages Router).
Для новых приложений мы рекомендуем использовать App Router. Для существующих приложений вы можете постепенно внедрять App Router. Также возможно использовать оба роутера в одном приложении.
Часто задаваемые вопросы
Как получить доступ к объекту запроса в макете?
Намеренно нельзя получить доступ к исходному объекту запроса. Однако вы можете получить доступ к 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). При использовании этих функций во время потоковой передачи интерфейса они вставляют метатег для выполнения перенаправления на стороне клиента.
Как реализовать аутентификацию с App Router?
Вот несколько распространенных решений для аутентификации, поддерживающих App Router:
- NextAuth.js
- Clerk
- Auth0
- Stytch
- Или ручное управление сессиями или JWT
Как установить cookies?
Вы можете устанавливать cookies в серверных действиях (Server Actions) или обработчиках маршрутов (Route Handlers) с помощью функции cookies.
Поскольку HTTP не позволяет устанавливать cookies после начала потоковой передачи, вы не можете устанавливать cookies напрямую со страницы или макета. Также можно устанавливать cookies из middleware.
Как создать мультитенантные приложения?
Если вы хотите создать одно приложение Next.js, обслуживающее нескольких клиентов (тенантов), у нас есть готовый пример, демонстрирующий рекомендуемую архитектуру.
Как инвалидировать кэш App Router?
В Next.js несколько уровней кэширования, поэтому есть несколько способов инвалидации разных частей кэша. Подробнее о кэшировании.
Есть ли комплексные open-source приложения, построенные на App Router?
Да. Вы можете посмотреть Next.js Commerce или Platforms Starter Kit — два крупных примера использования App Router с открытым исходным кодом.