Пошук уроків, статей та іншого контенту
Додасте клієнтську навігацію через Link і порівняєте її з повним перезавантаженням сторінки.
У Next.js кожна папка в app може представляти окремий маршрут.
Наприклад:
app/
├── page.tsx
└── about/
└── page.tsxЦя структура створює два маршрути:
app/page.tsx — /
app/about/page.tsx — /about
Для переходів між сторінками Next.js надає компонент Link.
LinkLink імпортується з next/link:
import Link from 'next/link'Потрібний маршрут передається через властивість href.
Створимо файл app/page.tsx:
import Link from 'next/link'
export default function HomePage() {
return (
<main>
<h1>Головна сторінка</h1>
<p>Вітаємо на сайті.</p>
<Link href="/about">Перейти про сайт</Link>
</main>
)
}Створимо файл app/about/page.tsx:
import Link from 'next/link'
export default function AboutPage() {
return (
<main>
<h1>Про сайт</h1>
<p>Це сторінка з інформацією про сайт.</p>
<Link href="/">Повернутися на головну</Link>
</main>
)
}Тепер натискання на посилання відкриває маршрут /about, а посилання на другій сторінці повертає користувача на /.
За звичайного переходу між HTML-сторінками браузер:
Надсилає новий HTTP-запит.
Отримує повний HTML-документ.
Перезавантажує сторінку.
Заново завантажує ресурси та ініціалізує застосунок.
Link використовує клієнтську навігацію. Next.js перехоплює натискання та завантажує потрібний маршрут без повного перезавантаження документа.
Це дає кілька переваг:
перехід зазвичай відбувається швидше;
браузер не перезавантажує весь документ;
спільні частини інтерфейсу можуть залишатися на місці;
користувач отримує поведінку, подібну до односторінкового застосунку.
Важливо: клієнтська навігація не означає, що сторінка /about уже міститься в браузері. Next.js завантажує необхідні дані та код для нового маршруту, але робить це без повного перезавантаження сторінки.
Link і звичайний елемент aЗвичайне посилання на внутрішній маршрут можна записати так:
<a href="/about">Перейти про сайт</a>Таке посилання спричиняє звичайний перехід браузера з повним перезавантаженням сторінки.
Для внутрішніх маршрутів Next.js зазвичай потрібно використовувати Link:
<Link href="/about">Перейти про сайт</Link>Порівняння:
import Link from 'next/link'
export default function NavigationExample() {
return (
<nav>
{/* Клієнтська навігація без повного перезавантаження */}
<Link href="/about">Про сайт через Link</Link>
{/* Звичайний перехід із повним перезавантаженням */}
<a href="/about">Про сайт через a</a>
</nav>
)
}Обидва елементи ведуть на /about, але спосіб переходу відрізняється.
hrefДля простих маршрутів href має рядкове значення:
<Link href="/about">Про сайт</Link>Для динамічних значень шлях можна зберігати у змінній:
import Link from 'next/link'
export default function HomePage() {
const aboutPath = '/about'
return (
<main>
<h1>Головна сторінка</h1>
<Link href={aboutPath}>Перейти про сайт</Link>
</main>
)
}Також можна створити кілька посилань у навігації:
import Link from 'next/link'
export default function Navigation() {
return (
<nav>
<Link href="/">Головна</Link>
<Link href="/about">Про сайт</Link>
</nav>
)
}Структура файлів:
app/
├── about/
│ └── page.tsx
└── page.tsxФайл app/page.tsx:
import Link from 'next/link'
export default function HomePage() {
return (
<main>
<h1>Головна</h1>
<nav>
<Link href="/about">Відкрити сторінку «Про сайт»</Link>
</nav>
</main>
)
}Файл app/about/page.tsx:
import Link from 'next/link'
export default function AboutPage() {
return (
<main>
<h1>Про сайт</h1>
<nav>
<Link href="/">Повернутися на головну</Link>
</nav>
</main>
)
}Запустіть застосунок і відкрийте головну сторінку. Натисніть посилання Link, а потім скористайтеся звичайним посиланням, якщо воно є на сторінці. Візуально результат може бути однаковим, але в другому випадку браузер повністю перезавантажить документ.
LinkВикористовуйте Link, коли переходите між маршрутами вашого Next.js-застосунку:
<Link href="/">Головна</Link>
<Link href="/about">Про сайт</Link>Для зовнішніх адрес використовуйте звичайний елемент a:
<a href="https://example.com">Зовнішній сайт</a>Link призначений для навігації між маршрутами поточного застосунку.
Компонент потрібно імпортувати з next/link:
import Link from 'next/link'Без цього Next.js не зможе розпізнати Link.
Якщо файл розташований у app/about/page.tsx, правильний шлях — /about:
<Link href="/about">Про сайт</Link>Шлях має відповідати структурі папок у app.
Link для зовнішнього сайтуДля зовнішніх адрес не потрібно використовувати Link:
<a href="https://example.com">Відвідати сайт</a>a для внутрішнього маршрутуЦей код працює, але виконує повне перезавантаження:
<a href="/about">Про сайт</a>Для маршруту всередині застосунку краще написати:
<Link href="/about">Про сайт</Link>Link імпортується з next/link.
Властивість href визначає маршрут переходу.
Link забезпечує клієнтську навігацію без повного перезавантаження сторінки.
Звичайний a для внутрішнього маршруту виконує повний перехід браузера.
Для внутрішніх маршрутів Next.js використовуйте Link.
Для зовнішніх адрес використовуйте звичайний елемент a.