Навигация на стороне клиента
Компонент Link обеспечивает навигацию на стороне клиента (client-side navigation) между страницами в одном приложении Next.js.
Навигация на стороне клиента означает, что переход между страницами происходит с использованием JavaScript, что быстрее стандартной навигации, выполняемой браузером.
Вот простой способ проверить это:
- Используйте инструменты разработчика браузера, чтобы изменить CSS-свойство
backgroundу элемента<html>наyellow. - Переходите по ссылкам между двумя страницами.
- Вы увидите, что желтый фон сохраняется при переходах.
Это показывает, что браузер не загружает полную страницу, и навигация на стороне клиента работает корректно.
Если бы вы использовали <a href="…"> вместо <Link href="…">, цвет фона сбрасывался бы при кликах, так как браузер выполнял бы полную перезагрузку.
Разделение кода и предзагрузка
Next.js автоматически выполняет разделение кода (code splitting), поэтому каждая страница загружает только необходимый для неё код. Это означает, что при рендеринге домашней страницы код других страниц изначально не загружается.
Это гарантирует быструю загрузку домашней страницы, даже если у вас сотни других страниц.
Загрузка кода только для запрашиваемой страницы также означает их изолированность. Если на одной странице произойдет ошибка, остальное приложение продолжит работать.
Кроме того, в production-сборке Next.js, когда компоненты Link появляются в области просмотра браузера, Next.js автоматически предзагружает (prefetches) код связанной страницы в фоновом режиме. К моменту клика по ссылке код целевой страницы уже будет загружен, и переход станет практически мгновенным!
Итоги
Next.js автоматически оптимизирует ваше приложение для наилучшей производительности с помощью разделения кода, навигации на стороне клиента и предзагрузки (в production-режиме).
Вы создаете маршруты как файлы в директории pages и используете встроенный компонент Link. Дополнительные библиотеки для маршрутизации не требуются.
Подробнее о компоненте Link можно узнать в API-справочнике next/link, а об маршрутизации в целом — в документации по маршрутизации.
Примечание: Если вам нужно ссылаться на внешнюю страницу вне приложения Next.js, используйте обычный тег
<a>безLink.