Search code examples
next.jsprefetch

Why does prefetching not work for <Link> component in Next.js?

I read many blogs everyone mentions that Next.js prefetches the Link but it was not working for me.

Here is my chrome network tab: enter image description here

that is my code that I tried:

import  Link from 'next/link' 

export default function Home() {
    return (
        <div >
          <Link href="/home">
              <a>Home</a>
          </Link>
          <Link href="/About/about">
              <a>About</a>
          </Link>
        </div>
    )
}
Solution

  • Next.js doesn't prefetch pages in development mode, prefetch is a production-only feature.

    prefetch

    Defaults to true. When true, next/link will prefetch the page (denoted by the href) in the background. This is useful for improving the performance of client-side navigations. Any <Link /> in the viewport (initially or through scroll) will be preloaded.

    Prefetch can be disabled by passing prefetch={false}. Prefetching is only enabled in production.

    — Next.js, Components: <Link>

    Try running your app in production mode instead.

    npm run build && npm run start