Next.js 中的 npm run dev 和 npm run start 有啥区别?

Posted

技术标签:

【中文标题】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 devnpm 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 上启动了服务器,没有任何问题。

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

【问题讨论】:

【参考方案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

它将编译用于生产。

【讨论】:

以上是关于Next.js 中的 npm run dev 和 npm run start 有啥区别?的主要内容,如果未能解决你的问题,请参考以下文章

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

错误:命令“npm run build”以 1 退出。vercel deploy 错误与 next.js

npm run prod 和 dev 中的 TailwindUI 差异

如何修复 laravel 6 中的错误 npm run dev

关于vue的npm run dev和npm run build

npm run dev 报错:missing script:dev