The Next.js `Link` Component: Props and Behavior Explained

The Link component is how the Next.js App Router connects pages without a full browser reload. Import it from next/link and pass it a destination, and Next.js handles prefetching and the client-side navigation for you.

App.tsx

// app/page.tsx
import Link from "next/link";
 
export default function HomePage() {
  return (
    <nav>
      <Link href="/about">About</Link>
    </nav>
  );
}

Click "About" in the browser and the URL changes to /about without a full page reload. Link renders a real anchor element under the hood, so it stays keyboard accessible and works with middle-click and right-click like any other link on the page.

The props Link accepts

Only the destination is required. The rest control prefetching, scroll behavior, history, and whether a navigation can be intercepted before it happens.

Link is a Client Component internally and needs to hydrate before it can prefetch a route, but you can still import and render it directly inside a Server Component file with no client directive of your own in that file.

How prefetch actually works

The prefetch behavior defaults to an automatic mode, and how much it fetches depends on the route. A static route prefetches in full. A dynamic route only prefetches down to the nearest loading boundary, so the rest of that page streams in after the click instead of ahead of it.

App.tsx

// app/page.tsx
import Link from "next/link";
 
export default function ProductsNav() {
  return <Link href="/products/42" prefetch={false}>Product 42</Link>;
}

Turning prefetching off for one link is useful for a rarely visited route where prefetching would waste bandwidth. Prefetching only runs in a production build. During local development with the dev server, links navigate normally but do not prefetch ahead of time.

Controlling history and scroll

Pass the replace prop when a navigation should not add a new back-button entry, such as after a redirect-like action.

App.tsx

<Link href="/login" replace>
  Log in
</Link>

Clicking this link swaps the login page into the current history entry, so the back button skips over the page the reader came from. The scroll prop works the same way for scroll position: it defaults to true, scrolling to the top of the new page, or to the first matching element when the destination includes a hash.

For what actually happens after the click, from the request for route data through the DOM update, see Client-Side Navigation in Next.js: What Happens on a Link Click. To show a loading indicator while a link is still pending, see useLinkStatus: Showing Pending State During Navigation.