Next.js开发服务器自动重载失效问题求助

以下是针对修改src/app/page.js后浏览器不自动同步变更的排查和解决步骤：

• 检查VS Code保存设置
  打开VS Code设置（快捷键Ctrl+, / Cmd+,），搜索「Auto Save」，设置为「afterDelay」或「onFocusChange」，确保文件修改后能实时写入磁盘。避免使用手动保存模式，防止出现保存不及时的情况。

• 清理缓存并重新构建

  1. 删除项目根目录下的.next文件夹和node_modules文件夹
  2. 重新执行npm install安装依赖
  3. 用npm run dev重启开发服务器
     缓存文件损坏可能导致监听逻辑异常，清理后大概率能恢复正常。

• 尝试Turbo模式启动
  启动开发服务器时添加--turbo参数：

  npm run dev -- --turbo
  

  Turbo模式的文件监听机制更高效，能解决部分常规模式下的监听失效问题。

• 排查路径与文件命名问题
  确保项目路径没有中文、空格或特殊符号，Next.js的文件监听对这类路径兼容性较差。同时检查src/app/page.js的文件名和目录结构是否正确，拼写错误会导致Next.js无法识别文件变更。

• 禁用VS Code扩展排查干扰
  部分格式化、文件同步类扩展可能拦截文件保存事件，导致Next.js监听不到变化。临时禁用所有扩展后重启VS Code，测试修改文件是否能自动重载，恢复正常后再逐个启用扩展找出问题根源。

• 调整系统文件监听限制
  Linux或macOS系统存在文件监听数量上限，若项目文件较多可能触发限制：

  • macOS执行以下命令临时提高限制：

    echo kern.maxfiles=65536 | sudo tee -a /etc/sysctl.conf
    echo kern.maxfilesperproc=65536 | sudo tee -a /etc/sysctl.conf
    sudo sysctl -w kern.maxfiles=65536
    sudo sysctl -w kern.maxfilesperproc=65536
    

  • Linux执行：

    echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf
    sudo sysctl -p
    

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