Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що робить компонент Link у Next.js?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Компонент `Link` у **Next.js** відповідає за **клієнтську навігацію між сторінками** - без повного перезавантаження браузера, як у SPA, але з перевагами серверного рендеру. **Ключове:** `Link` забезпечує клієнтську навігацію між сторінками без перезавантаження, з автоматичною попередньою загрузкою коду й даних, покращуючи продуктивність і користувацький досвід.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняКомпонент `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 забезпечує клієнтську навігацію між сторінками без перезавантаження, з автоматичною попередньою загрузкою коду й даних, покращуючи продуктивність і користувацький досвід.**Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.