Next.js：修改文件后刷新页面，而无需重新运行“ npm run”

Question

我已经使用普通的LAMP堆栈和前端的javascript（和jQuery）构建网站。但是我也想尝试将javascript用于后端。我刚刚开始学习next.js。

在旧的方法上，如果我修改了php文件，要查看效果，我可以刷新Web浏览器。但是我注意到，使用next.js您无法立即看到更改。我必须停止npm脚本，重新运行“ npm run xxx”命令，然后刷新浏览器。这很费时间。

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

Answer 1

导致此问题的一个常见问题与意外导入组件以及在小写/大写命名约定中犯下一个小拼写错误有关。

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

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

Answer 2

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

但如果您添加自定义服务器，它不会热重加载对此的更改。您可以使用nodemon来监视并重新启动服务器：https ://github.com/remy/nodemon

Answer 3

@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生产模式。

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