In Next.js, the <Link> component is the recommended way to handle navigation between pages. It optimizes performance by enabling client-side navigation and automatic preloading, making page transitions faster and more seamless.

Client-side Navigation

<Link> ensures that only the necessary parts of the page update without a full page reload. This preserves the application state, such as scroll position and form inputs, providing a smoother user experience.

import Link from "next/link";

<Link href="/about">Go to About</Link>

Automatic Preloading

Next.js automatically preloads linked pages when they are visible in the viewport. When the user clicks, the page loads instantly without delay.

<Link href="/about">Go to About</Link>

Styling and Flexibility

From Next.js 13 onwards, styles can be applied directly to <Link> without requiring a nested <a> tag.

<Link href="/about" className="text-blue-500 underline">
  Go to About
</Link>

Advanced Features

The replace prop modifies the history stack without adding a new entry, useful for scenarios like login redirects.

<Link href="/about" replace>Go to About</Link>

By default, navigation scrolls to the top. This can be disabled with the scroll prop to maintain scroll position.

<Link href="/about" scroll={false}>Go to About</Link>

Programmatic Navigation

<Link> can be combined with useRouter() for dynamic navigation within event handlers.

import { useRouter } from "next/navigation";

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

  return (
    <button onClick={() => router.push("/about")}>
      Go to About
    </button>
  );
}

Conclusion

<Link> provides fast client-side navigation, automatic preloading, and advanced control over navigation behavior. It enhances user experience by reducing page reloads and optimizing performance.