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

Beginner

Answer

  • Link: Declarative navigation component for client-side transitions
  • router.push(): Programmatic navigation method
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>
  );
}