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

Question

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

老办法，如果我修改了一个php文件，看效果我只要刷新浏览器就可以了。 但我注意到使用 next.js 你不能立即看到变化。 我必须停止 npm 脚本，重新运行“npm run xxx”命令，然后刷新浏览器。 这有点耗时。

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

Answer 1

@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 npm run build; npm run start用于生产模式。

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

Answer 2

导致这种情况的一个常见问题与意外导入组件和使用小写/大写命名约定的小错误有关。

例如，您导入一个名为Navigation的组件作为navigation 。

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

Answer 3

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

但是如果你添加一个自定义服务器，它不会热重载更改。 您可以使用 nodemon 来监视和重启服务器： https : //github.com/remy/nodemon