Next.js 中的 npm run dev 和 npm run start 有什么区别？答案

【问题标题】：What's the difference between npm run dev and npm run start in Next.js?Next.js 中的 npm run dev 和 npm run start 有什么区别？
【发布时间】：2021-11-22 18:27:27
【问题描述】：

我想知道npm run dev 和npm run start 之间有什么区别。令我惊讶的是，我在网上找不到关于这个主题的太多信息。

具体来说，我想了解一下 React 和 Next JS 的上下文。

我注意到，使用 React，您可以通过运行 npm run start 来启动您的应用程序，而无需先运行构建。另一方面，Next JS 的行为似乎并不相同（但我可能在设置上做错了什么）。我尝试使用npm run start 运行一个新的Next 应用程序，因为它是package.json 中的默认脚本，但它不起作用。它显示此错误：*Error: Could not find a production build*

相反，运行 npm run dev 创建了一个 .next 文件夹，并在端口 3000 上启动了服务器，没有任何问题。

谁能帮我理解它是如何工作的？

【问题讨论】：

标签： reactjs npm next.js npm-scripts

【解决方案1】：

TL;DR: 在 Next.js 中，next dev 用于在开发模式下运行应用程序。另一方面，next start 用于在生产模式下运行应用程序，但需要先运行 next build 以生成优化的生产版本。

发展

在开发中运行 Next.js 应用程序时，您需要使用 next dev：

next dev 使用热代码以开发模式启动应用程序重新加载、错误报告等。

生产

在为生产构建 Next.js 应用程序时，您需要使用 next build：

next build 为您创建优化的生产版本应用。输出显示有关每条路线的信息。

Size – 导航到页面时下载的资产数量客户端。每条路由的大小仅包括其依赖项。

First Load JS – 访问页面时下载的资源数量从服务器。所有人共享的JS数量单独显示指标。

后跟next start，当您要启动生产服务器时：

next start 在生产模式下启动应用程序。这应用程序应首先使用next build 编译。

或next export，将应用导出为static HTML时：

next export 允许您将应用导出为静态 HTML，可以是无需 Node.js 服务器即可独立运行。

有关详细信息，请参阅Next.js CLI 文档。

【讨论】：

【解决方案2】：

通常这取决于您的 package.json 文件中写入的内容。例如，就我而言，在这个文件中我得到了：

  "scripts": {
    "watch": "webpack --watch --watch-poll --progress --color",
    "prod": "webpack -p",
    "watch2": "webpack --watch --watch-poll --progress --color",
    "build": "webpack --config=webpack.prod.config.js --progress --watch-poll -p"
  },

所以，如果我跑了

npm run watch

我将为开发进行编译并将执行：

webpack --watch --watch-poll --progress --color

但是，如果我运行

npm run build

它将被执行：

webpack --config=webpack.prod.config.js --progress --watch-poll -p

它将编译用于生产。

【讨论】：