nextJS异常频繁热更新

Question

求问，nextJS的简单实验，层级如下：

代码也是默认生成的代码，：

路由跳转在views文件下：

点击页面切换，如下：

为啥？从创建项目到添加页面，配置项没有改动就

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

解答

你遇到的问题是 Next.js 的热更新（Hot Update）频繁更新的问题。这个问题通常是由于 Next.js 的开发服务器在检测到文件变化时，会自动重新编译和更新应用程序，从而导致频繁的热更新。

在你的情况下，可能是由于你在 views 文件夹下添加了新的页面，导致 Next.js 的开发服务器检测到文件变化，频繁地重新编译和更新应用程序。

解决这个问题的一种方法是，使用 next/config 配置文件来禁用热更新。可以在 next.config.js 文件中添加以下配置：

module.exports = {
  // ...
  devOptions: {
    hot: false,
  },
};

这将禁用热更新，Next.js 的开发服务器将不会自动重新编译和更新应用程序。

另外，你也可以使用 next/bundle 配置文件来控制热更新的频率。可以在 next.config.js 文件中添加以下配置：

module.exports = {
  // ...
  bundle: {
    updateInterval: 1000, // 设置热更新的频率为 1 秒
  },
};

这将设置热更新的频率为 1 秒，减少热更新的频率。

如果你想继续使用热更新，可以尝试使用 next/bundle 配置文件来控制热更新的范围。例如，可以在 next.config.js 文件中添加以下配置：

module.exports = {
  // ...
  bundle: {
    updateInterval: 1000, // 设置热更新的频率为 1 秒
    updateScope: 'views', // 设置热更新的范围为 views 文件夹
  },
};

这将设置热更新的频率为 1 秒，并且只更新 views 文件夹下的文件。

希望这些解决方案能够帮助你解决问题！