next/link — это встроенный компонент в Next.js, который позволяет осуществлять переходы между маршрутами на стороне клиента. Он важен по двум основным причинам: производительность и пользовательский опыт. Благодаря возможности маршрутизации на стороне клиента, next/link снижает нагрузку на сервер и ускоряет время загрузки страниц, улучшая общую производительность приложения. Это происходит потому, что при переходе на разные части сайта загружаются только необходимые данные, а не перезагружается вся страница. Для пользовательского опыта это приводит к более плавным переходам и меньшему времени ожидания, обеспечивая более бесшовный просмотр.

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

Основные особенности

• Предварительная загрузка (Prefetching): Link автоматически предварительно кэширует связанные страницы, которые пользователь, вероятно, посетит следующими. Это оптимизирует время загрузки во время навигации.
• Доступность: Помогает с навигационными подсказками для пользователей с экранными читалками и пользователей с клавиатуры.
• Разделение кода (Code Splitting): Next.js использует эту стратегию по умолчанию, загружая только JavaScript-код, необходимый для конкретной страницы, которую посещает пользователь.
• Интеллектуальная маршрутизация: Обрабатывает клики по ссылкам изящно, улучшая пользовательский опыт за счет предоставления утонченных навигационных эффектов.

Пример:

В следующем Example.tsx вы можете увидеть, как Next.js обрабатывает разделение кода под капотом.

import Link from 'next/link';
 
const Home = () => {
  return (
    <div>
      <h1>Home</h1>
      <Link href="/about">
        <a>About Us</a>
      </Link>
      {/* Другие навигационные ссылки */}
    </div>
  );
};
 
export default Home;

Компонент AboutUs загружается только когда пользователь переходит на этот конкретный маршрут, демонстрируя эффективное разделение кода:

const AboutUs = () => {
  return (
    <div>
      <h1>About Us</h1>
      {/* Содержимое страницы "About Us" */}
    </div>
  );
}
 
export default AboutUs;

Когда использовать компонент Link

Компонент Link отлично подходит для навигации внутри приложения, особенно когда:

• Направляете пользователей из одного раздела приложения в другой.
• Нужно предоставить положительную обратную связь по действиям пользователя, например, на экранах успешного завершения отправки формы.

Однако он не является идеальным выбором для:

• Открытия ссылок в новых вкладках/окнах браузера.
• Управления динамическим состоянием или побочными эффектами.

Назад