Next.js修改页面元素触发全页刷新而非热重载，如何解决？

问题详情 #

使用Next.js开发时，热重载功能失效——修改页面元素后，页面会触发全页刷新，而非热重载即时更新，严重拖慢开发效率。

复现场景 #

pages目录下的test.js代码（注：代码存在未闭合标签的语法错误）：

function test() {
  return <div>Test <div>;
}

export default test;

访问http://localhost:3000/test显示“Test”，将文本改为“test2”后，页面先全页刷新才显示新内容，不符合热重载预期。

控制台提示 #

修复方案 #

• 修复组件语法错误：确保页面组件代码无语法错误（比如示例中未闭合的<div>标签），语法错误会导致Next.js无法正常执行热重载，触发全页刷新。
• 升级Next.js到最新稳定版：部分旧版本存在热重载bug，执行命令：

  npm install next@latest
  

• 禁用webpack缓存：在next.config.js中添加配置，避免缓存干扰热重载：

  module.exports = {
    webpack: (config) => {
      config.cache = false;
      return config;
    },
  };
  

• 检查页面文件规范：确保页面文件放在pages目录下，命名无特殊字符、大小写错误，保证Next.js能识别为可热重载的组件。
• 关闭浏览器扩展：广告拦截、代理类扩展可能破坏热重载的WebSocket连接，关闭所有扩展后重试。
• 重启开发服务器：临时进程缓存可能导致异常，终止服务器后重新运行npm run dev。
• 排查依赖冲突：最近新增的webpack/babel插件、第三方依赖可能和热重载机制冲突，逐一移除测试。

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