Next.js 13修改代码后需手动硬刷新才能生效，寻求解决方案

以下是针对该问题的几种排查和解决思路：

• 更新依赖到最新稳定版
  旧版本的Next.js、React或React DOM可能存在App Router模式下的热更新兼容问题，先执行命令更新依赖：

  npm update next react react-dom
  # yarn 用户执行
  yarn upgrade next react react-dom
  

  更新完成后重启开发服务器测试。

• 临时关闭SWC Minify
  你的配置中开启了swcMinify: true，SWC在部分场景下可能干扰热更新流程，尝试关闭它：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    reactStrictMode: true,
    swcMinify: false,
    experimental:{
      appDir: true
    }
  }
  
  module.exports = nextConfig
  

  如果关闭后热更新恢复正常，可后续关注Next.js版本更新，待SWC相关修复后再重新开启。

• 检查Tailwind配置的路径覆盖
  确保Tailwind的content配置包含了App Router的目录，否则样式修改可能无法被热更新检测到：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      "./app/**/*.{js,ts,jsx,tsx}", // 必须包含app目录
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./components/**/*.{js,ts,jsx,tsx}",
    ],
    theme: {
      extend: {},
    },
    plugins: [],
  }
  

  同时确认postcss.config.js配置正确，没有遗漏必要插件：

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  

• 清理缓存并重装依赖
  缓存损坏是常见的热更新失效原因，执行以下操作：

  # 删除Next.js缓存目录
  rm -rf .next
  # 清除npm缓存
  npm cache clean --force
  # 重装依赖
  npm install
  

  完成后重启开发服务器。

• 排查React Strict Mode的影响
  虽然Strict Mode本身不直接导致热更新问题，但如果你的组件存在重复执行的副作用逻辑，可能在Strict Mode下干扰热更新。可以临时关闭测试：

  const nextConfig = {
    reactStrictMode: false,
    swcMinify: true,
    experimental:{
      appDir: true
    }
  }
  

  如果恢复正常，需要调整组件中的副作用逻辑（比如使用useEffect时添加清理函数），之后再重新开启Strict Mode。

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