Different Strategy for Next.js LInk prefetch

[fuma-nama]

Goals

Improve the prefetching strategy of Next.js link.

Non-Goals

This change shouldn't introduce breaking change, 100% consistent
This change doesn't affect Pages Router, only App Router supports new features.

Background

Why?

Currently, Next.js Link component supports only viewport strategy, the link is prefetched when it appears in viewport.
This isn't always ideal.

For example, like use cases of a docs where you have a long list of links on sidebar, this occurs:

A massive list of RSC payload requests for prefetching links, while the cost isn't necessarily high, preferably some nicer strategies like "predicting from the mouse movement" would be better.

Side Issue

A really weird abstraction of prefetch prop is that when set to true, it triggers a full prefetch (ignores loading.tsx).
But default value/null actually means auto, which takes loading.tsx into account.

Most people without taking a deep look on the docs, won't notice the difference (especially they're coming from a background of other frameworks). A string value actually tells them what it does, reducing mistakes.

Proposal

Introducing some improvements to the props:

  /**
   * Prefetch the page in the background.
   * Any `<Link />` matches the specified strategy will be prefetched.
   *
   * @remarks
   * Prefetching is only enabled in production.
   *
   * - In the **App Router**:
   *   - `viewport` (default): prefetch when link appears in viewport.
   *   - `predict`: prefetch based on prediction of user's cursor.
   *   - `true`: same as `viewport`, but also set `prefetchScope` to `full`.
   *   - `false`: Prefetch disabled.
   * - In the **Pages Router**:
   *   - `true` (default): Prefetches the route and data in the background on viewport or hover.
   *   - `false`: Prefetch only on hover, not on viewport.
   *
   * @defaultValue `true` (Pages Router) or `null` (App Router)
   *
   * @example
   * ```tsx
   * <Link href="/dashboard" prefetch={false}>
   *   Dashboard
   * </Link>
   * ```
   */
  prefetch?: PrefetchStrategy | boolean | null

  /**
   * The scope of data to prefetch.
   *
   * - `full`: Always prefetch the full route and data.
   * - `auto` (default): Prefetch behavior depends on static vs dynamic routes:
   *   - Static routes: fully prefetched
   *   - Dynamic routes: partial prefetch to the nearest segment with a `loading.js`
   */
  prefetchScope?: 'full' | 'auto'

Usage:

import Link from "next/link";

export default function Page() {
  return (
    <div id="container">
      <Link href="/test/1" prefetch="viewport">
        Viewport
      </Link>
      <Link href="/test/2" prefetch="predict">
        Predict
      </Link>
      <Link href="/test/3" prefetch="intent">
        Intent
      </Link>
    </div>
  );
}

I've made the implementation, and willing to contribute. (#77878)