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

Question

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:

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

juliomalves · Accepted Answer · 2023-06-16 17:31:45Z

17

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

edited Jun 16, 2023 at 17:31

answered Mar 7, 2021 at 18:12

juliomalves

51.1k23 gold badges181 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related