Next.js每次渲染不更新内容、修改代码后仍展示旧内容如何解决？

核心原因 #

• Next.js开发服务热重载缓存bug：尤其是13+版本的App Router场景，常出现修改代码后对应模块未触发重新编译，旧编译产物一直保留的问题，只有重启服务才会全量重新构建。
• 浏览器端资源强缓存：Chrome缓存了旧的JS打包产物，就算服务端编译了新代码，浏览器依然读取本地缓存的旧文件运行。
• 静态生成页面未配置重校验：如果当前页面是SSG静态生成模式，未设置revalidate属性的话，开发环境下不会自动重新生成静态页面，只会用首次构建的产物。
• 全局模块缓存未更新：你修改了Redux的useSelector取值逻辑，如果相关Redux模块被其他全局逻辑引用，旧的模块实例没有被销毁，就会一直执行旧代码。

解决步骤 #

按优先级依次操作即可，无需每次都重启服务：

1. 硬刷新浏览器跳过缓存：按下Ctrl+Shift+R（Mac为Cmd+Shift+R），加载最新服务端资源，检查控制台是否还会输出旧日志。
2. 清除Next.js本地编译缓存：删除项目根目录下的.next文件夹，再重启开发服务，该文件夹存储所有编译后产物，删除后会强制全量重新编译，彻底清除旧代码残留。
3. 检查配置项：确认next.config.js中开启了reactStrictMode: true，严格模式可提升热重载准确性；关闭未稳定的experimental实验特性，这类特性常导致热重载失效。
4. 升级稳定版本：如果使用的是Next.js 13/14的早期测试版本，本身存在大量热重载已知问题，升级到最新官方稳定版即可修复。

内容的提问来源于stack exchange，提问作者Mohammad Noushad Siddiqui