如何为 nextjs 应用程序配置保存时自动构建？

Question

我创建了我的第一个 NextJS 应用程序。这是使用 [npx create-next-app] 创建的基本默认应用程序。我使用 VS Code 作为我的 IDE。当我更新 index.tsx 上的代码时，我需要从 cmd 执行 [npm run build]，然后重新加载浏览器，以便我的代码更新反映在浏览器中。

当我在 VS Code 中保存对 React 应用程序组件的更改时，我不需要运行构建命令。我只需刷新浏览器即可反映我的更改。对我来说，配置具有相同行为的 NextJS 应用程序的最简单方法是什么？在我的更改反映在浏览器中之前，基本上不需要我运行构建命令？我用谷歌搜索“nextjs auto build on save”，但这似乎没有返回任何相关结果。

Answer 1

我想知道您使用什么脚本来运行您的开发环境？

作为一个快速总结 - 使用典型的 npx 设置，有三个命令可以完成图片：

第一个是“下一个构建”，此命令编译您的项目并将其保存到输出文件夹中 - 默认情况下为 /.next。

然后，“next start”将获取 .next 文件夹中的文件并使用它们启动服务器实例。

然而“next dev”正是你想要的——它具有自动编译等功能。

我会将这些作为脚本添加到您的 package.json 中。

"dev": "cross-env NODE_ENV=development next dev",
"build": "cross-env NODE_ENV=production next build",
"start": "next start",