Next.js开发中app目录下layout/page修改不热更新问题求助

问题现象 #

• 使用npx create-next-app@latest创建新项目，初期组件开发正常，后续出现热更新异常：
  • npm run dev启动服务器时，修改/app目录下的layout.js和page.jsx，页面无任何变化，必须重启服务器才能生效
  • 修改/components/Header.jsx时，热更新正常生效
  • 在export default function RootLayout(){}外部写入console.log("Hi");可以执行，但写在函数内部则无法运行

相关文件内容 #

layout.js #

import Navbar from "@/components/navbar";
import './globals.css';
import { Inter } from 'next/font/google';

const inter = Inter({ subsets: ['latin'] });

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
};


export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <div className="max-w-5xl mx-auto px-8">
          <Navbar />
          {children}
        </div>
      </body>
    </html>
  );

}

page.jsx #

import Header from "@/components/Header";

export default function Home() {
  return (
    <>
      <Header />
      <h1>Home</h1>
    </>
  );
}

package.json #

{
  "name": "next-auth",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "autoprefixer": "10.4.14",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.5",
    "next": "13.4.5",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2"
  }
}

Node.js版本：v18.16.0

可能的原因及解决方法 #

• 缓存堆积问题
  1. 删除项目根目录下的.next文件夹和node_modules/.cache目录
  2. 执行npm install重新安装依赖，再启动npm run dev
• 文件监听失效
  1. 确认项目目录不在系统受保护路径（如Windows的Program Files、Mac的系统目录），这类路径可能导致文件变化无法被Next.js监听
  2. 检查编辑器的自动保存设置，确保修改后文件能实时写入磁盘
• 依赖版本问题
  1. 升级Next.js到最新稳定版：npm install next@latest，部分旧版本的App Router可能存在热更新bug
  2. 清除npm全局缓存：npm cache clean --force，再重新安装依赖
• 配置或环境变量异常
  1. 检查是否存在自定义next.config.js，若配置了output: 'export'会禁用热更新，需移除该配置
  2. 确认开发环境未设置NODE_ENV=production，该环境变量会关闭热更新机制

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