What is the difference between Link and router.push()?

Link is a component for declarative navigation, while router.push() is a method for programmatic navigation from your code. Both perform a client-side transition without a full page reload.

Use Link for anything a user clicks to go somewhere. It extends the HTML <a> element, so it keeps normal link behavior such as opening in a new tab. It also prefetches the linked route in production when the link enters the viewport, so the route is already loaded when the user clicks.

Use router.push() when navigation is a side effect, such as after a form submits or a login succeeds. It does not prefetch on its own, so call router.prefetch() first if the next page is predictable.

import Link from 'next/link';
import { useRouter } from 'next/router';

function Navigation() {
  const router = useRouter();
  
  const handleClick = () => {
    router.push('/about');
  };
  
  return (
    <div>
      <Link href="/about">About Page</Link>
      <button onClick={handleClick}>Go to About</button>
    </div>
  );
}

This example imports useRouter from next/router, which belongs to the Pages Router. In the App Router, import useRouter from next/navigation inside a Client Component.