Маршрутизация с Link и переходы между страницами

Зачем нужен Link?

В Next.js маршрутизация организована таким образом, что каждая страница по сути представляет собой компонент, связанный с маршрутом. Для плавного перехода между страницами применяется встроенный компонент Link. Этот компонент предоставляет более эффективный способ навигации по сравнению с обычным <a> тегом, так как он использует клиентскую маршрутизацию (client-side routing), избегая полной перезагрузки страницы.

import Link from 'next/link';

const HomePage = () => {
  return (
    <div>
      <h1>Добро пожаловать на главную страницу</h1>
  <Link href="/about">Перейти на страницу "О нас"</Link>
    </div>
  );
};

export default HomePage;

В примере выше, мы используем компонент Link, чтобы создать ссылку на страницу "О нас" /about. При клике на эту ссылку пользователь мгновенно переходит на указанную страницу без перезагрузки страницы в браузере.

Особенности использования компонента Link

1. Вложенный тег <a>

В версиях 13 и раньше, нужно было дополнять тег <Link> тегом <a>: для лучшей совместимости с SEO-ботами и другими системами анализа ссылок. Выглядел такой код так:

<Link href="/about">
  <a>Перейти на страницу "О нас"</a>
</Link>

Больше так делать не нужно. Современная версия библиотеки сама добавляет тег <a> во всех нужных местах. Поэтому ваш код будет компактнее и лаконичнее:

<Link href="/about">Перейти на страницу "О нас"</Link>

Но всегда есть вероятность, что на работе вы будете использовать более старые версии библиотек, так что все может быть. Вам нужно знать, что такое бывает.

2. Проп href

Это основное свойство компонента Link, которое указывает путь (маршрут) к целевой странице. Оно может быть:

• Относительным: /about — путь от корня сайта.
• Абсолютным: https://example.com/about — указывает на внешний ресурс.

<Link href="https://example.com">
  Перейти на внешний сайт
</Link>

3. Предварительная загрузка (Prefetch)

Одной из мощных функций компонента Link является автоматическая предварительная загрузка (prefetch) страниц. Когда Link появляется на экране, Next.js автоматически загружает ресурсы страницы, указанной в href. Это значительно ускоряет переход.

Вы можете явно отключить эту функцию, установив prefetch={false}:

<Link href="/about" prefetch={false}>
  Перейти на страницу "О нас"
</Link>

Однако в большинстве случаев предварительная загрузка полезна и рекомендуется оставлять её включённой.

Оптимизация переходов между страницами

Когда вы используете Link, Next.js не перезагружает всю страницу. Вместо этого он загружает только изменённые данные или компоненты, что позволяет:

• Уменьшить время ожидания при переходе.
• Сохранить текущее состояние приложения, поскольку остаётся "живой" DOM (без полной перезагрузки окна браузера).

Улучшение пользовательского опыта

Иногда вы не хотите, чтобы новое местоположение маршрута добавлялось в историю браузера (например, для временных сообщений или модальных окон). В этом случае можно использовать replace:

<Link href="/success" replace>
  Скрыть сообщение об успехе
</Link>

Активная ссылка (Active Link)

Для улучшения UX часто необходимо визуально выделять текущую страницу. Для этого можно проверять текущий маршрут с помощью usePathname().

Пример активной ссылки:

import Link from 'next/link';
import { usePathname } from 'next/navigation';

const Navbar = () => {
  const pathname = usePathname();

  return (
    <nav>
      <Link href="/" className={pathname === '/' ? 'active' : ''}>
        Главная
      </Link>
      <Link href="/about" className={pathname === '/about' ? 'active' : ''}>
        О нас
      </Link>
    </nav>
  );
};

export default Navbar;

В файле CSS добавляем стили:

.active {
  font-weight: bold;
  color: blue;
}

Теперь текущая страница будет выделяться.

Типичные ошибки и их устранение

Ошибка 1: использование <a> вместо Link

Если вы используете обычный <a> тег для маршрутов внутри Next.js приложения, это приведёт к полной перезагрузке страницы. Вместо этого всегда используйте Link для внутренних ссылок.

Ошибка 2: наличие <a> внутри Link

Если добавить <a> внутрь Link, это может привести к проблемам с SEO и совместимостью:

// Не рекомендуется
<Link href="/about">
  <a>О нас</a>
  </Link>

  // Рекомендуется
<Link href="/about">О нас</Link>

Ошибка 3: неправильный путь в href

Если в href указан неверный маршрут, вы получите ошибку 404. Убедитесь, что все маршруты корректны и соответствуют файлам в структуре проекта.