Що робить компонент Link у Next.js?

Next.jsMiddle~1 хв читання

Компонент Link у Next.js відповідає за клієнтську навігацію між сторінками - без повного перезавантаження браузера, як у SPA, але з перевагами серверного рендеру.

Простіше:

Link = перехід між сторінками швидко, без reload, з попередньою загрузкою даних

Що робить `Link` під капотом

1. Клієнтська навігація (SPA-перехід)

URL змінюється
сторінка не перезавантажується
стан застосунку зберігається
немає document.reload
плавний UX

2. Автоматичний prefetch

Коли посилання потрапляє у viewport:

Next.js заздалегідь завантажує JS і дані сторінки
перехід відчувається миттєвим

Можна вимкнути:

tsx

<Link href="/blog" prefetch={false}>Blog</Link>

3. Code splitting

завантажується лише код цільової сторінки
не весь бандл застосунку

4. Працює із серверним рендерингом

Link:

поважає SSR / SSG / ISR
використовує вже згенерований HTML
не ламає SEO

Приклад використання

tsx

import Link from 'next/link'

<Link href="/blog/my-post">
  Читати статтю
</Link>

Чим `Link` кращий за звичайний `<a>`

`<a>`	`Link`
Повний reload	SPA-навігація
Немає prefetch	Prefetch із коробки
Повільно	Швидко
Втрата state	State зберігається

<a> потрібен лише для зовнішніх посилань.

Робота з динамічними маршрутами

tsx

<Link href={`/blog/${slug}`}>
  {title}
</Link>

Важливі нюанси

Link не рендерить <a> вручну (в App Router)
підтримує replace, scroll, prefetch
можна використовувати всередині Server Components

Коротка відповідь для співбесіди

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

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.