Прежде чем мы начнем, обратите внимание, что компоненты Next.js 13 по умолчанию являются серверными компонентами. Это примерно означает, что вы не можете использовать побочные эффекты и действия клиента, такие как useEffect, useState, onClick и т. д. Вы можете сделать компонент клиентской стороной, добавив директиву "use client" поверх компонента поверх импорта.
Серверные компоненты также повышают производительность за счет уменьшения объема JavaScript, отправляемого клиенту, упрощают получение данных, лучше для SEO, потому что боты поисковых систем могут легко получить доступ к HTML-содержимому страницы, и им не нужно ждать выполнения кода на стороне клиента.

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

Страницы

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

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

Макеты

В файле layout.tsx вы создаете пользовательский интерфейс, который используется несколькими дочерними страницами. Таким образом, вы можете создать пользовательский интерфейс для /company/about, и этот макет будет применяться ко всем страницам маршрута /company/about/*, но не для одноуровневых маршрутов, таких как /company/career.
Вы можете создать макет на любом уровне маршрута.

При навигации макеты сохраняют состояние, остаются интерактивными и не перерисовываются.

Вы можете создать макет, экспортировав функцию по умолчанию из файла layout.tsx.
Обратите внимание, самая верхняя функция макета называется RootLayout, любая другая макет вы можете назвать, как вы хотите. В приведенном ниже примере вы можете увидеть необходимый RootLayout.

В корневой макет вы должны включить теги html и body.

Любой другой макет может выглядеть так (макет для страницы /about)

Вы можете обернуть дочерние элементы во что угодно.
Каждый макет принимает свойство children, которое будет заполнено дочерними макетами и страницами.

Шаблоны

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

Обратите внимание, если у вас нет конкретной причины использовать шаблон, вам следует использовать макет. Шаблоны могут быть полезны в таких случаях, как:

  • Вход/выход из анимации с помощью CSS или анимационных библиотек.
  • Функции, которые полагаются на useEffect (например, регистрация просмотров страниц) и useState (например, форма обратной связи для каждой страницы).
  • Чтобы изменить поведение фреймворка по умолчанию. Например, границы приостановки внутри макетов показывают запасной вариант только при первой загрузке макета, а не при переключении страниц. Для шаблонов резервный вариант отображается в каждой навигации.

Получение данных

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

Вы также можете получить данные в клиентских компонентах. В клиентских компонентах рекомендуются такие библиотеки, как SWR или React Query. (В будущем также можно будет использовать хук use()).

Вы можете получить доступ к новой системе выборки данных с помощью собственного веб-API fetch() и использовать async/await в серверных компонентах.

Вы можете получать данные из нескольких компонентов. Next.js 13 автоматически кэширует запросы (GET), которые имеют одинаковые входные данные во временном кеше. Таким образом вы избегаете ситуаций, когда одни и те же данные могут быть получены более одного раза. Это полезно для выборки данных в макетах, потому что невозможно передавать данные между родительским макетом и его дочерними элементами. Просто извлеките данные непосредственно из макета, который в них нуждается, а Next.js 13 позаботится о кэшировании и дедупликации запросов.

Два шаблона выборки данных

  • параллельная выборка данных — если у вас нет одного запроса, зависящего от предыдущего, вы можете использовать параллельную выборку данных. Это уменьшает количество «водопадов» клиент-сервер и общее время, необходимое для загрузки данных, поскольку запросы на маршруте с готовностью инициируются и начинают извлекаться в одно и то же время.
  • последовательная выборка данных — если у вас есть один запрос, зависящий от предыдущего, вы можете использовать последовательную выборку данных. Это может привести к увеличению времени загрузки, но полезно в случаях, когда одна выборка зависит от результата предыдущей.

Если вы хотите узнать больше о шаблонах выборки данных, посетите Документацию Next.js 13.
Если вы хотите расширить свои знания в целом о выборке данных в Next.js 13, вот ссылка.

Изменение тега ‹head›

Еще одна вещь, которую вы должны знать, это новый способ изменения тега head.

Если вы используете статические значения в теге head:

Если вы используете динамические данные в теге head:

Это все в этой статье. Если вы хотите расширить свои знания, ознакомьтесь с документацией.
Надеюсь, вам понравилось! 🚀