Next.js 15 Sıfırdan Başlangıç

next/link ile Navigasyon

HTML\'deki <a> etiketi tüm sayfayı yeniler. Next.js\'in <Link> komponenti ise client-side navigasyon sağlar — sayfanın yalnızca değişen kısmı güncellenir, bu da çok daha hızlı bir deneyim sunar.

import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="flex gap-4 p-4">
      <Link href="/">Ana Sayfa</Link>
      <Link href="/hakkimizda">Hakkımızda</Link>
      <Link href="/blog">Blog</Link>

      {/* Dinamik link */}
      <Link href={`/blog/${slug}`}>Yazıyı Oku</Link>

      {/* Nesne sözdizimi */}
      <Link
        href={{
          pathname: "/urunler",
          query: { kategori: "elektronik", sayfa: 1 },
        }}
      >
        Elektronik Ürünler
      </Link>
    </nav>
  );
}

Aktif Link Stili

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function Navbar() {
  const pathname = usePathname();

  const linkler = [
    { href: "/", label: "Ana Sayfa" },
    { href: "/hakkimizda", label: "Hakkımızda" },
    { href: "/blog", label: "Blog" },
  ];

  return (
    <nav>
      {linkler.map((link) => (
        <Link
          key={link.href}
          href={link.href}
          className={pathname === link.href ? "font-bold text-blue-600" : "text-gray-600"}
        >
          {link.label}
        </Link>
      ))}
    </nav>
  );
}

Programatik Yönlendirme

"use client";
import { useRouter } from "next/navigation";

export default function LoginButton() {
  const router = useRouter();

  async function handleLogin() {
    // Login işlemleri...
    router.push("/dashboard");    // Yönlendir
    // router.replace("/dashboard"); // Geçmişi değiştirmeden yönlendir
    // router.back();                // Geri git
    // router.refresh();             // Sayfayı yenile (veriyi refetch et)
  }

  return <button onClick={handleLogin}>Giriş Yap</button>;
}

Prefetching

Link komponenti, viewport\'a girdiğinde otomatik olarak sayfayı önceden yükler (prefetch). Bu sayede tıklamadan önce sayfa hazır olur:

<Link href="/agir-sayfa" prefetch={false}>
  Prefetch devre dışı
</Link>