Linking Between Pages · Next.js

Ch 2 · Routes Are Folders — card 4 of 5.

import Link from "next/link";

export default function Nav() {
  return (
    <nav>
      <Link href="/">Home</Link>
      <Link href="/orders">Orders</Link>
      <Link href="/orders/new">New order</Link>
    </nav>
  );
}

A plain <a> reloads the whole application: every script re-downloads, all state is lost, the screen flashes white. Link swaps only the part of the page that changed, and quietly pre-loads the destination when the link scrolls into view.

Use <a> only for addresses outside your own app.