Next.js 13代码修改后浏览器无自动更新及手动刷新无效求助

在Windows 11设备上搭建了Next.js 13.5.2应用，通过npm run dev启动本地服务器http://localhost:3000/，但在VSCode中修改代码后，所有浏览器既不自动更新，手动刷新也无法同步修改内容。

环境配置 #

package.json 关键内容 #

"scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@types/node": "20.6.3",
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "autoprefixer": "10.4.16",
    "eslint": "8.49.0",
    "eslint-config-next": "13.5.2",
    "next": "13.5.2",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.3",
    "typescript": "5.2.2"
  }

版本信息 #

• Node.js: v18.16.0
• npm: 9.5.1

解决步骤 #

1. 排查Windows Defender拦截 #

Windows Defender实时保护可能阻止Next.js监听文件变化：

• 临时关闭实时保护，重启npm run dev测试
• 若有效，将项目文件夹添加到Windows Defender的排除项中

2. 强制禁用浏览器缓存 #

手动刷新不同步大概率是缓存问题：

• 打开浏览器开发者工具（F12），在Network面板勾选禁用缓存
• 或使用快捷键Ctrl + Shift + R强制刷新页面

3. 配置Webpack文件轮询 #

Windows环境下文件监听易失效，修改Next.js配置启用轮询模式：
在项目根目录创建/修改next.config.js：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.watchOptions = {
      poll: 1000, // 每秒轮询文件变化
      aggregateTimeout: 300,
    };
    return config;
  },
};

module.exports = nextConfig;

保存后重启npm run dev

4. 清理依赖并重建 #

• 删除依赖文件夹和锁文件：

  rmdir /s node_modules
  del package-lock.json
  

• 重新安装依赖：

  npm install
  

• 重启开发服务器

5. 检查VSCode自动保存设置 #

确保修改的文件已被保存：

• 打开VSCode设置（Ctrl + ,），搜索Auto Save，设置为afterDelay或onFocusChange
• 手动保存时确认已按Ctrl + S

6. 升级Node.js版本 #

当前Node.js v18.16.0与Next.js 13.5.2可能存在兼容性细节问题，建议升级到Node.js 18.x最新稳定版或20.x版本，重新安装依赖后测试

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