Next.js : 修改文件后刷新页面，无需重新运行 'npm run'

Posted 2023-02-22

【中文标题】Next.js : 修改文件后刷新页面，无需重新运行 \'npm run\'

【英文标题】：Next.js : Refresh page after modifying a file, without rerunning 'npm run'Next.js : 修改文件后刷新页面，无需重新运行 'npm run'

【发布时间】：2017-09-28 23:05:37

【问题描述】：

很长一段时间以来，我一直在使用普通的 LAMP 堆栈和 javascript（和 jQuery）作为前端来构建网站。但我也想尝试使用 javascript 作为后端。我刚开始学习 next.js。

在旧的方式中，如果我修改了一个 php 文件，我可以刷新网络浏览器来查看效果。但我注意到使用 next.js 你不能立即看到变化。我必须停止 npm 脚本，重新运行“npm run xxx”命令，然后刷新浏览器。这有点费时。

有没有办法自动化这个过程？

【问题讨论】：

对于客户端更改，您需要重新启动脚本吗？或者您指的是何时进行服务器端更改？

Auto-reload of files in Node.js的可能重复

就是这样。我对 next.js 提供的整个“通用 javascript”生态系统真的很陌生。我不确定它是服务器端还是客户端。我在 next.js 项目的 /pages 文件夹中修改了一个 js 文件。我猜它是客户端，因为它只包含反应的东西？

Nodemon 将在服务器端或客户端代码更改时刷新。它的安装非常简单，所以试试吧。

【参考方案1】：

在开发模式下，Next.js 默认会热重加载任何更改，你甚至不需要刷新浏览器。

但如果您添加自定义服务器，则不会对其进行热重载更改。可以使用nodemon监视并重启服务器：https://github.com/remy/nodemon

【讨论】：

我认为我没有使用自定义服务器。我在 Windows 10 主机上的 vagrant box (Ubuntu 14.04) 内运行 next.js。我按照 learnnextjs.com 中的教程进行操作，并没有做任何特别的事情..

【参考方案2】：

@Rudi 的回答是正确的，我将补充一点，您要确保最终运行的命令是 next，而不是 next start。区别在于next 用于开发模式，而next start 用于生产模式。在生产模式下，它不会监视您的文件进行更改。

通常，您会在 package.json 的脚本部分引用这些命令：

  "scripts": 
    "dev": "next",
    "build": "next build",
    "start": "next start"
  

然后您实际输入并运行的命令将是 npm run dev 用于本地开发或 npm run build; npm run start 用于生产模式。

如果这不适合您的使用，并且即使在开发模式下您也必须重新启动服务器，那么您的设置可能有问题。

【参考方案3】：

导致此问题的一个常见问题与意外导入组件和使用小写/大写命名约定出现轻微拼写错误有关。

例如，您将名为Navigation 的组件导入为navigation。

这仍将导入Navigation，但实时重新加载将被破坏。

【讨论】：

我过得很好，兄弟

它至少应该显示一个错误或者不应该导入它

这正是我的问题。我宁愿从错字中得到一个错误

我在这个问题上苦苦挣扎了几个小时。命名约定有问题。谢谢本·奎克

确认也发生在我身上！我使用 （大写）但导入 /input （小写），当我保存时，本地主机中的内容不会更新，但控制台不会抛出任何错误（使用 windows）