next/link Prefetch Behavior

next/link enables client navigations and, by default, prefetches linked App Router payloads when the link enters the viewport (on production). That makes subsequent clicks feel instant — at the cost of extra network work.

Docs: Linking and Navigating, Link.

Default usage

import Link from 'next/link';

export function Nav() {
  return <Link href="/pricing">Pricing</Link>;
}

Control prefetch

<Link href="/heavy" prefetch={false}>
  Heavy page
</Link>

• prefetch={true} (default in production for static routes)
• prefetch={false} to disable
• Dynamic routes may prefetch less aggressively depending on version/config

When to disable

Situation	Why
Huge admin tables of links	Prefetch storm
Paywalled content links	Avoid leaking payloads
Low-end mobile / data saver	Bandwidth
Infinite lists of cards	Prefetch only on hover if you custom-implement

Hover intentional prefetch

Some apps set prefetch={false} then call router.prefetch(href) on hover/focus for balance.

Interview out-loud

“next/link prefetches route segments when links enter the viewport in production, speeding navigations. I disable prefetch for dense link grids or sensitive routes and rely on hover prefetch when I need a middle ground.”

Related on this site

• File-based Routing
• Client Routing Mental Model
• Caching in Next.js Overview
• Static vs Dynamic Rendering

Further reading

• Link — nextjs.org
• Prefetching

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Quick self-test

Explain the concept in 60 seconds, write a minimal code sample from memory, name one footgun, and point to the primary docs. If any of those fail, reread the worked example and rebuild it in a scratch file until the model sticks under interview pressure.

Edge cases worth rehearsing

Interviewers and production incidents cluster around the same edges: first render versus update, empty and loading states, Strict Mode double setup, concurrent interruptions, and what happens when identity (key, route params, user id) changes mid-edit. Walk one concrete user journey end-to-end — open, edit, navigate away, come back — and say which state survives.

Prefer fixing data flow and ownership before reaching for memoization or micro-optimizations. Prefer event handlers over effects when a user action is the trigger. Prefer deriving values during render over mirroring props into state. Prefer stable list keys from business ids. Measure with the profiler when performance is the claim.

When you cite an API, mention one failure mode: abort on unmount, serializable props across server/client boundaries, focus restoration for dialogs, or cache invalidation after a mutation. Specific beats generic every time.

Related guides

• Auth Patterns OverviewAuth in Next.js App Router: cookies/sessions, middleware gates, server checks, and avoiding client-only security theater.
• Caching in Next.js OverviewNext.js caching layers: request memoization, data cache, full route cache, and router cache — what invalidates each.
• Client Components in Next.jsClient Components in the App Router: use client, hydration, bundling boundaries, and patterns that keep JS small.
• Data Fetching Patterns App RouterFetch data in Server Components with async/await and fetch caching: colocation, parallel requests, and client fallbacks.
• Deploying Next on VercelDeploy Next.js on Vercel: git integration, env vars, previews, build cache, and production checklist.