Link & Client-Side Navigation

Plain anchor tags trigger a full reload — the browser throws away the React tree and starts over. Next.js ships a Link component that uses client-side navigation so the existing tree (and its layouts) stick around.

The Link Component

import Link from 'next/link';

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog/hello">First Post</Link>
    </nav>
  );
}

Link renders an anchor tag, so middle-click, right-click, and accessibility work as expected. It also prefetches the destination on hover or when it scrolls into view.

Controlling Prefetch

Prefetching is helpful but not free. On long lists or noisy navs, opt out.

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

For sibling links that almost certainly will not be clicked, prefetch={false} keeps network traffic predictable.

Programmatic Navigation

For navigation triggered by code rather than a click, use the useRouter hook from next/navigation. It only works in Client Components.

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

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

  async function onClick() {
    await fetch('/api/logout', { method: 'POST' });
    router.push('/login');
  }

  return <button onClick={onClick}>Log out</button>;
}

router.push, router.replace, router.back, and router.refresh are the main methods you reach for.

Scroll Behavior

By default, Link resets scroll to top on navigation, like the browser would. To preserve scroll for in-page links or tabs, pass scroll={false}.

The next lesson moves from UI navigation to writing HTTP API endpoints with route handlers.