mediumFrontend

What is prefetching in Next.js and how does next/link prefetch routes?

Q: What is prefetching in Next.js and how does next/link prefetch routes?

**TL;DR.** 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. <Link> visible in viewport prefetch bg Router Cache <text class='d-sub' x='28

559 views

Understand the problem

Loading route code/data before navigation.

nextjsprefetchnext-linkperformance

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

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>)}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

How do you read request data and return responses in a Next.js Route Handler?

How does code splitting and next/dynamic work in Next.js?