CODEWITHSUNDEEP
next.jsprefetch
Akash Maurya
Akash Maurya

Reputation: 167

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

Upvotes: 6

Views: 7735

Answers (1)

juliomalves
juliomalves

Reputation: 50278

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

Upvotes: 17

Related Questions