Next.js 13部分文件自动重载失效：Navbar组件无热更新

以下是几个直接可行的排查和修复方向：

• 检查导入路径与别名配置
  确认layout.js中导入Navbar用的是正确的相对路径，比如import Navbar from './components/navbar'。如果用了路径别名，务必核对jsconfig.json或tsconfig.json里的别名映射是否准确——别名配置错误会导致Next.js热重载无法追踪到文件变更。

• 核对组件导出与导入的匹配性
  要是Navbar用的是默认导出export default Navbar，导入时就别用命名导入；反之如果是命名导出export const Navbar = ...，导入时要写import { Navbar } from './components/navbar'。导出导入不匹配会直接干扰Next.js的模块热替换逻辑。

• 手动清除Next.js缓存
  执行命令删除缓存文件：

  rm -rf .next
  

  之后重启npm run dev。缓存文件损坏是特定组件热重载失效的常见原因。

• 排查自定义配置干扰
  如果项目有自定义Webpack配置或HMR相关插件，先暂时移除这些配置，重启服务看热重载是否恢复。要是恢复了，再逐步定位是哪部分配置影响了默认行为。

• 升级Next.js到稳定版本
  部分旧版Next.js 13在app目录组件热重载上存在已知bug，执行命令升级到最新稳定版：

  npm install next@latest
  

• 检查文件/文件夹命名
  确保navbar相关文件或文件夹没有特殊字符，也不要用layout.js、page.js这类Next.js保留文件名，避免混淆框架的路由识别逻辑。

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