How to Prefetch in Next.js for Faster Navigation

In Next.js, you can prefetch pages by using the prefetch prop on the Link component, which loads the linked page in the background. By default, Next.js prefetches pages in the viewport automatically, but you can control this behavior manually for better performance.

Syntax

The Link component from next/link supports a prefetch boolean prop. Setting prefetch to true enables preloading the linked page's code and data in the background. If omitted, Next.js prefetches automatically when the link is visible in the viewport.

Example parts:

• href: The path to the page to link to.
• prefetch: Optional boolean to enable or disable prefetching.

jsx

import Link from 'next/link';

export default function Example() {
  return (
    <Link href="/about" prefetch={true}>
      <a>About Us</a>
    </Link>
  );
}

Example

This example shows a simple Next.js page with two links. The first link explicitly enables prefetching, so Next.js loads the target page in the background immediately. The second link relies on the default behavior, prefetching only when visible.

jsx

import Link from 'next/link';

export default function Home() {
  return (
    <main style={{ padding: '2rem' }}>
      <h1>Welcome to Next.js Prefetch Demo</h1>
      <nav style={{ display: 'flex', gap: '1rem' }}>
        <Link href="/about" prefetch={true}>
          <a>About (Prefetch Enabled)</a>
        </Link>
        <Link href="/contact">
          <a>Contact (Default Prefetch)</a>
        </Link>
      </nav>
    </main>
  );
}

Output

<h1>Welcome to Next.js Prefetch Demo</h1>
<nav>
  <a>About (Prefetch Enabled)</a>
  <a>Contact (Default Prefetch)</a>
</nav>

Common Pitfalls

Common mistakes when using prefetch in Next.js include:

• Setting prefetch to false unintentionally disables prefetching, which can slow navigation.
• Using prefetch on external links has no effect because Next.js only prefetches internal pages.
• Prefetching too many links at once can waste bandwidth and hurt performance.

Always prefetch only important internal links and rely on Next.js default viewport-based prefetching for others.

jsx

import Link from 'next/link';

// Wrong: prefetch false disables prefetching
export default function Example() {
  return (
    <Link href="/about" prefetch={false}>
      <a>About</a>
    </Link>
  );
}

// Right: omit prefetch or set true for internal pages
export default function ExampleRight() {
  return (
    <Link href="/about">
      <a>About</a>
    </Link>
  );
}

Quick Reference

Property	Description	Default
href	Path to the page to link to	Required
prefetch	Enable or disable prefetching of the linked page	true when visible in viewport
passHref	Pass href to child element	false
replace	Replace current history instead of push	false

Key Takeaways

Use the prefetch prop on Link to control prefetching behavior.

Next.js automatically prefetches links in the viewport by default for faster navigation.

Avoid disabling prefetch on important internal links to keep navigation smooth.

Prefetch only internal pages; external links do not support prefetching.

Balance prefetching to avoid wasting bandwidth and hurting performance.