Вивчайте Оптимізація навігації в Next.js | Створення Сторінок і Макетів у Next.js

Тепер, коли всі необхідні сторінки створено, розглянемо, як користувачі можуть переміщатися між ними. Традиційно для цього використовують стандартний HTML-тег <a>. Однак такий підхід призводить до повного перезавантаження сторінки, що негативно впливає на досвід користувача.

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

Примітка

Детальніше про клієнтську навігацію можна дізнатися у документації за посиланням: docs

Або можна продовжити роботу над проєктом. Використання компонента Link є кращим підходом, і його практичне застосування буде продемонстровано у проєкті.

Повертаємося до проєкту

Для реалізації клієнтської навігації відкрийте app/ui/dashboard/nav-links.tsx, імпортуйте компонент Link з next/link та замініть тег <a> на <Link>.

Після збереження змін протестуйте ваш localhost для забезпечення безперервної навігації між сторінками без оновлення сторінки.

На практиці

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 3. Розділ 4

Запитати АІ

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain how the Link component improves navigation compared to the <a> tag?

What else can I customize when using the Next.js Link component?

Are there any best practices for using client-side navigation in Next.js?

Awesome!

Completion rate improved to 2.08

Свайпніть щоб показати меню