Next.js 13.2.4中Link组件hover预取如何彻底禁用？

针对你使用Next.js 13.2.4 pages路由的场景，以下两种方法可以彻底禁用hover时的预取请求：

1. 全局禁用所有Link的hover预取 #

在项目根目录的next.config.js中添加experimental.prefetchPages配置，全局关闭页面预取功能：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    prefetchPages: false,
  },
}

module.exports = nextConfig

该配置会完全禁用所有Link组件的预取行为，包括初始加载和hover触发的预取。

2. 针对单个Link禁用hover预取 #

如果不想全局禁用，可直接给Link的子元素绑定onMouseEnter事件并阻止默认行为：

<Link href={`blog/${id}`} prefetch={false}>
  <h2 onMouseEnter={(e) => e.preventDefault()}>{title}</h2>
</Link>

也可以封装成复用的自定义组件，减少重复代码：

import Link from 'next/link'

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

  return (
    <Link href={href} prefetch={false} {...props}>
      <span onMouseEnter={handleMouseEnter}>{children}</span>
    </Link>
  )
}

// 使用示例
// <NoPrefetchLink href={`blog/${id}`}><h2>{title}</h2></NoPrefetchLink>

补充说明 #

你之前设置的prefetch={false}仅会关闭页面初始加载时的预取，而hover触发的预取是Next.js Link的独立行为，需要通过上述全局配置或事件阻止的方式彻底禁用。

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