Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

Next.js 13 представил новую систему маршрутизации с использованием каталога приложений. Next.js 12 уже предоставлял простой способ обработки маршрутов через маршруты на основе файлов. Добавление компонента в папку pages автоматически сделает его маршрутом. В этой новой версии маршрутизатор на основе файловой системы поставляется со встроенной настройкой для макетов, вложенной маршрутизации шаблонов, загрузочным пользовательским интерфейсом, обработкой ошибок и поддержкой серверных компонентов и потоковой передачи.

В этой статье объясняются эти новые функции и почему они важны.

Начало работы с Next.js 13

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

npx создавать-следующий-приложение@последнее следующее13 --experimental-приложение

Это должно создать новую папку с именем next13 с новым каталогом приложения.

instagram viewer

Понимание нового каталога приложений

Next.js 12 использовал страницы каталог для маршрутизации, но он заменяется на приложение/ каталог в Next.js 13. страницы/ каталог по-прежнему работает в Next 13, чтобы обеспечить постепенное внедрение. Вам нужно только убедиться, что вы не создаете файлы в двух каталогах для одного и того же маршрута, так как вы получите сообщение об ошибке.

Вот текущая структура каталога приложения.

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

  • страница.tsx - Файл, используемый для создания пользовательского интерфейса для определенного маршрута.
  • layout.tsx - Он содержит определение макета маршрута и может использоваться на нескольких страницах. Они идеально подходят для навигационных меню и боковых панелей. При навигации макеты сохраняют состояние и не перерисовываются. Это означает, что при переходе между страницами с общим макетом состояние остается прежним. Следует отметить, что должен быть самый верхний макет (корневой макет), содержащий все теги HTML и body, общие для всего приложения.
  • шаблон.tsx - Шаблоны похожи на макеты, однако они не сохраняют состояние и перерисовываются каждый раз, когда используются для создания страницы. Шаблоны идеально подходят для ситуаций, когда вам нужно запускать определенный код каждый раз, когда компонент монтируется, например, анимация входа и выхода.
  • ошибка.tsx - Этот файл используется для обработки ошибок в приложении. Он обертывает маршрут граничным классом ошибки React, так что при возникновении ошибки в этом маршруте или его дочерних элементах он пытается исправить ее, отображая удобную для пользователя страницу ошибки.
  • загрузка.tsx - Пользовательский интерфейс загрузки мгновенно загружается с сервера, когда пользовательский интерфейс маршрута загружается в фоновом режиме. Пользовательский интерфейс загрузки может быть вращающимся или каркасным экраном. Как только содержимое маршрута загружается, оно заменяет загрузочный пользовательский интерфейс.
  • не найдено.tsx - Ненайденный файл отображается, когда Next.js встречает Ошибка 404 для этой страницы. В Next.js 12 вам придется вручную создавать и настраивать страницу 404.
  • head.tsx - Этот файл определяет тег заголовка для сегмента маршрута, в котором он определен.

Как создать маршрут в Next.js 13

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

Например, чтобы создать маршрут с путем /products, вам нужно будет создать приложение/продукты/page.tsx файл.

Для вложенных маршрутов, таких как /products/sale, вкладывать папки друг в друга так, чтобы структура папок выглядела как приложение/продукты/продажа/page.tsx.

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

Использование серверных компонентов в каталоге приложений

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

См. эту статью на различные методы рендеринга в Next.js для более подробного объяснения.

Серверный компонент означает, что вы можете безопасно получать доступ к секретам среды, не раскрывая их на стороне клиента. Например, вы можете использовать процесс.env.

Вы также можете напрямую взаимодействовать с серверной частью. Нет необходимости использовать getServerSideProps или getStaticProps так как вы можете использовать async/await в серверном компоненте для получения данных.

Рассмотрим эту асинхронную функцию, которая извлекает данные из API.

асинхронныйфункцияполучить данные() {
пытаться{
константа разрешение = Ждите принести(' https://api.example.com/...');
возвращаться res.json();
 } ловить(ошибка) {
бросатьновыйОшибка(«Не удалось получить данные»)
 }
}

Вы можете вызвать его прямо на странице следующим образом:

экспортпо умолчаниюасинхронныйфункцияСтраница() {
константа данные = Ждите получить данные();
возвращаться<див>див>;
}

Серверные компоненты отлично подходят для рендеринга неинтерактивного контента. Если вам нужно использовать хуки React, прослушиватели событий или API-интерфейсы только для браузера используют клиентский компонент, добавляя директиву «использовать клиент» в верхней части компонента перед любым импортом.

Компоненты с инкрементальной потоковой передачей в каталоге приложений

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

  • Создание загрузка.tsx файл, который будет отображаться для всего сегмента маршрута. 
экспортпо умолчаниюфункцияЗагрузка() {
возвращаться<п>Загрузка...п>
}
  • Обертывание отдельных компонентов границей React Suspense и указание резервного пользовательского интерфейса. 
Импортировать { Приостановка } от"реагировать";
Импортировать { Продукты } от"./Компоненты";
экспортпо умолчаниюфункцияРаспродажа() {
возвращаться (
<раздел>
Продукты...
}>
<Продукты />
саспенс>
раздел>
 );
}

Перед визуализацией компонента «Продукты» пользователь увидит «Продукты…». Это лучше, чем пустой экран с точки зрения пользовательского опыта.

Обновление до Next.js 13

Новый каталог приложений определенно является улучшением по сравнению с предыдущим каталогом страниц. Он включает в себя специальные файлы, такие как layout, head, template, error, not-found и loading, которые обрабатывают различные состояния при рендеринге маршрута без необходимости ручной настройки.

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

Однако вы все равно можете перейти на Next.js 13, так как каталог страниц все еще работает, а затем начать использовать каталог приложений в своем собственном темпе.