Next.js'te sayfalar arasında nasıl gezinirsiniz?

Next.js, tam sayfa yeniden yüklenmesinden daha hızlı olan client-side navigation sağlar — yalnızca yeni sayfanın verilerini/bileşenlerini getirir ve bunları değiştirir, paylaşılan düzenleri bağlı tutarak.

Link bileşeni (bildirim temelli)

import Link from "next/link";

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href={`/blog/${post.slug}`}>Read post</Link> {/* dynamic href */}
    </nav>
  );
}

<Link>, <a> oluşturur ancak client-side navigation için tıklamayı kesintiye uğratır. Önemlisi, bağlantı viewport'a girdiğinde bağlantılı rotayı önceden yükler, bu nedenle gezinme anında hissedilir.

Programlı gezinme (olay işleyicilerinde)

"use client"; // useRouter needs a Client Component
import { useRouter } from "next/navigation"; // note: next/navigation in App Router

export default function LoginForm() {
  const router = useRouter();
  async function onSubmit() {
    await login();
    router.push("/dashboard");   // navigate after an action
    // router.replace("/x")  — no history entry
    // router.back()         — go back
    // router.refresh()      — re-fetch server data for the current route
  }
}

Gezinmenin mantığa yanıt olarak gerçekleşmesi gerektiğinde useRouter kullanın (form gönderme, giriş yapma vb. sonrasında), bir bağlantıya tıklama değil.

Client-side navigation neden hızlıdır

• Tam yeniden yükleme yok — yalnızca değiştirilen segmentler yeniden render edilir; paylaşılan düzenler bağlı kalır.
• Önceden yükleme — <Link> tıklamadan önce rotaları önceden yükler.
• Durumu korur — değiştirilmemiş düzenler gezinme sırasında durumlarını korur.

Önemli: next/navigation'dan içe aktarın

App Router'da hook'lar next/navigation'dan gelir (useRouter, usePathname, useSearchParams) — eski next/router'dan değil (bu yalnızca Pages Router içindir). Bunları karıştırmak yaygın bir hatadır.

Neden önemli

<Link> (otomatik önceden yükleme ile) ve useRouter, Next.js'nin ünlü olduğu hızlı, SPA benzeri gezinmeyi inşa etme yöntemidir.

Bunları düz <a href> yerine kullanmak (tam yeniden yüklemeyi zorlayan) uygulamayı hızlı tuttuğunuz ve düzen durumunu koruduğunuz şeydir.