Next.js 15 From Scratch

Client-Side Navigation with next/link

The HTML <a> tag causes a full page reload. Next.js's <Link> component provides client-side navigation — only the changed parts update, making page transitions feel instant.

import Link from "next/link";

export default function Navbar() {
  return (
    <nav className="flex gap-4 p-4">
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>

      {/* Dynamic link */}
      <Link href={`/blog/${slug}`}>Read Post</Link>

      {/* Object syntax */}
      <Link
        href={{
          pathname: "/products",
          query: { category: "electronics", page: 1 },
        }}
      >
        Electronics
      </Link>
    </nav>
  );
}

Active Link Styling

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

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

  const links = [
    { href: "/", label: "Home" },
    { href: "/about", label: "About" },
    { href: "/blog", label: "Blog" },
  ];

  return (
    <nav>
      {links.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>
  );
}

Programmatic Navigation

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

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

  async function handleLogin() {
    // login logic...
    router.push("/dashboard");    // Navigate
    // router.replace("/dashboard"); // Navigate without adding to history
    // router.back();                // Go back
    // router.refresh();             // Re-fetch server data
  }

  return <button onClick={handleLogin}>Log In</button>;
}

Prefetching

The Link component automatically prefetches pages when they enter the viewport. Clicks feel instant because the page is already downloaded:

<Link href="/heavy-page" prefetch={false}>
  No prefetch
</Link>