🚦 What is prefetch ?

In Next.js, <Link> can prefetch the code + data for the target page before you click .

That means when the user actually clicks, navigation feels instant .

⚙️ How it works under the hood

When a <Link> appears in the viewport , Next.js triggers a prefetch request :

The JavaScript bundle for that route.

In App Router ( /app ), also the React Server Component (RSC) payload .

Prefetching uses an IntersectionObserver so links outside the screen aren’t prefetched unnecessarily.

If you hover/focus a link, Next.js may also prefetch aggressively.

When you click, Next.js already has the assets in the router cache , so navigation happens with zero extra network latency .

🛠 Usage

import Link from " next/link " ;

export default function Home () { return ( < nav > { /* Prefetch ON (default in production) */ } < Link href = "/about" > About </ Link >

{ /* Explicitly disable prefetch */ } < Link href = "/contact" prefetch = { false } > Contact </ Link > </ nav > ); }

Enter fullscreen…