Loading route code/data before navigation.
Skip to solutionKEEP THE
mediumFrontend
What is prefetching in Next.js and how does next/link prefetch routes?
559 views
01
Understand the problem
nextjsprefetchnext-linkperformance
02
Attempt it yourself
Sketch your approach before reading the solution — that's what interviews test.
Nudge consolestandby
Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.
03
Study the solution
next/link prefetches the linked route's JS and (for static routes) data when the link is visible/hovered, so navigation feels instant. Prefetch can be disabled with prefetch={false}; in dev it's off. It populates the client Router Cache ahead of time.
Solution ready — 2 min read
Classified // press E to declassify
04
Read the code
Default vs disabled prefetch
import Link from 'next/link';
// default: prefetched when visible (production) → instant navigation
<Link href="/dashboard">Dashboard</Link>;
// long list / rarely clicked → skip prefetch to save bandwidth
{items.map((i) => <Link key={i.id} href={`/item/${i.id}`} prefetch={false}>{i.name}</Link>)}05
Join the discussion
Discussion (0)
Sign in to join the discussion.
No responses yet. Be the first to share what you think.
Transmission complete // awaiting log
KEEP THE
STREAK ALIVE.
Dossier 51 of 95 decoded in the Next.js track. One more won't hurt.