如何关闭Next.js Link组件在hover时的页面预取功能？

可能的原因及对应解决方法 #

1. 区分Next.js路由模式配置 #

如果你用的是App Router（Next.js 13+），仅给单个Link加prefetch={false}可能因全局配置优先级更高而失效，可尝试两种方案：

• 单个Link组件保持prefetch={false}的同时，在next.config.js中添加全局禁用预取的配置：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    prefetchPages: false, // 全局关闭页面预取
  },
}

module.exports = nextConfig

• 若仅需禁用特定Link，可额外包裹一层自定义组件，阻止hover时的默认预取触发逻辑。

2. Pages Router场景的额外处理 #

如果是Pages Router，除了设置prefetch={false}，还要排查是否有第三方UI库或自定义hover事件覆盖了Link的默认行为。可以：

• 用自定义组件包裹Link，手动阻止预取触发：

import Link from 'next/link'

const NoPrefetchLink = ({ href, children }) => {
  const handleHover = (e) => {
    e.preventDefault()
  }

  return (
    <Link href={href} prefetch={false} onMouseEnter={handleHover}>
      {children}
    </Link>
  )
}

• 若不需要客户端导航的优势，直接使用原生<a>标签替代Next.js的Link组件。

3. 清除缓存并重新构建 #

生产环境可能存在缓存残留导致配置不生效，执行以下操作：

• 删除项目根目录下的.next文件夹和node_modules/.cache目录
• 重新构建生产包：npm run build && npm start

4. 验证配置是否生效 #

打开浏览器开发者工具的Network面板，筛选XHR请求，鼠标悬停目标Link时，观察是否还有预取请求发送，以此确认配置是否生效。

内容的提问来源于stack exchange，提问作者Irushan