Link Component and Client-Side Navigation

7 min read

Navigating Between Pages

Next.js ships next/link, a drop-in replacement for <a> that performs client-side navigation without a full page reload. It also prefetches linked pages in the background, making transitions feel instant.

tsx

import Link from "next/link";

export default function Navbar() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
    </nav>
  );
}

Programmatic Navigation

For navigation triggered by code (e.g. after a form submission), use useRouter from next/navigation inside a Client Component.

tsx

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

export default function BackButton() {
  const router = useRouter();
  return <button onClick={() => router.back()}>Go Back</button>;
}

Import useRouter from next/navigation, not next/router. The next/router import is only for the legacy Pages Router and will not work in the App Router.

Ready to test yourself?

Practice Next.js— quiz & coding exercises