为什么预取对 Next.js 中的 <Link> 组件不起作用？

Question

我读了很多博客，每个人都提到 Next.js 预取链接，但它对我不起作用。

这是我的 Chrome 网络选项卡：

这是我尝试过的代码：

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

Answer 1

Next.js 在开发模式下不会预取页面，预取只是生产功能。

\n

\n

预取

\n

默认为true. 当 时true，将在后台next/link预取页面\n（用 表示） 。href这对于提高\n客户端导航的性能很有用。<Link />视口中的任何内容（初始或通过滚动）都将被预加载。

\n

可以通过传递 来禁用预取prefetch={false}。预取仅在生产中启用。

\n

\xe2\x80\x94 Next.js，组件：<Link>

\n

\n

尝试在生产模式下运行您的应用程序。

\n

npm run build && npm run start\n

\n