Linking Between Pages

Use Next.js's <Link> component instead of a plain <a> tag to navigate between pages within your own app.

Example: navigation with Link

import Link from "next/link";

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

A plain <a href="/about"> would work too, but it triggers a full page reload, throwing away everything already loaded and starting fresh. <Link> pre-fetches the destination page's content in the background as soon as it becomes visible, then swaps content in without a full reload when clicked, making navigation between pages of your own app feel close to instant. Reserve a plain <a> for links leaving your site entirely, for internal navigation within a Next.js app, <Link> is almost always the right choice.