Навігація: Link та useRouter

Клієнтська навігація без перезавантаження сторінки — компонент Link і хуки для програмної навігації.

Чому не звичайний тег <a>

Звичайний <a href="..."> змушує браузер повністю перезавантажити сторінку — заново завантажити весь JavaScript і повторно ініціалізувати застосунок. Компонент Link із next/link виконує навігацію на клієнті, без повного перезавантаження, і завантажує потрібний код заздалегідь (prefetch), поки посилання лише з'являється у видимій області екрана.

tsx

import Link from "next/link";

function Nav() {
  return (
    <nav>
      <Link href="/">Головна</Link>
      <Link href="/blog">Блог</Link>
      <Link href={`/blog/${post.slug}`}>{post.title}</Link>
    </nav>
  );
}

tsx

"use client";

import { useRouter } from "next/navigation";

function LoginForm() {
  const router = useRouter();

  async function handleSubmit() {
    await loginUser();
    router.push("/dashboard"); // програмний перехід після успішного логіну
  }

  return <form action={handleSubmit}>{/* ... */}</form>;
}

tsx

"use client";

import { usePathname } from "next/navigation";

function NavLink({ href, children }: { href: string; children: React.ReactNode }) {
  const pathname = usePathname();
  const isActive = pathname === href;

  return (
    <Link href={href} className={isActive ? "active" : ""}>
      {children}
    </Link>
  );
}

Навігація: Link та useRouter

Чому не звичайний тег <a>

Програмна навігація: useRouter

Читання поточного маршруту

Поширені помилки

Підсумок