Next.js中npm run dev与npm run start的区别是什么？

首先明确：npm run 执行的是项目 package.json 中 scripts 字段定义的自定义命令，不同前端框架/脚手架对这两个命令的默认定义完全不同，因此表现差异较大。

1 Create React App（默认React项目脚手架）的脚本逻辑 #

市面上常见的可直接执行npm run start启动的React项目，基本都是使用Create React App（CRA）初始化的，其默认脚本逻辑如下：

• npm run start：CRA默认将该命令绑定开发环境启动逻辑，内置webpack-dev-server，启动时实时编译代码、支持热更新、开发态错误提示，不需要提前执行构建操作，默认监听3000端口。
• npm run build：CRA的生产构建命令，执行后会生成优化后的build静态资源文件夹，需配合nginx、serve等静态服务启动生产环境应用。
• npm run dev：CRA默认配置中无该脚本，多数项目会手动将其绑定到和start相同的开发启动逻辑，属于非官方的自定义配置。

2 Next.js 的默认脚本逻辑 #

Next.js官方初始化的项目，package.json 中脚本定义是固定的，和CRA的命名逻辑完全不同：

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  }
}

各命令的执行逻辑如下：

• npm run dev：启动开发环境服务
  • 启动时自动生成.next临时文件夹，存放开发态编译产物
  • 支持热更新、源映射、开发环境错误提示等调试能力
  • 页面、接口路由采用按需编译逻辑，不做全量生产优化，启动速度快，默认监听3000端口
• npm run build：执行生产环境全量构建
  • 对所有页面、静态资源做编译优化，包括SSG/SSR/ISR路由预处理、代码压缩、Tree Shaking、静态资源哈希等
  • 构建完成后会在.next文件夹生成可用于生产环境的完整构建产物
• npm run start：启动生产环境服务
  • 不执行任何编译操作，仅读取npm run build生成的.next目录下的生产构建产物启动服务
    报错Error: Could not find a production build的原因就是未提前执行npm run build，不存在可用的生产构建产物
  • 生产服务默认开启资源缓存、页面预加载等性能优化，不支持热更新。

命令对应关系总结 #

两个框架的命令命名逻辑不同，不能直接对标，对应关系如下：

• 开发环境启动命令：CRA的npm run start = Next.js的npm run dev
• 生产环境启动流程：
  • CRA：执行npm run build → 把生成的build文件夹交给静态服务启动
  • Next.js：执行npm run build → 执行npm run start启动Node.js生产服务

内容的提问来源于stack exchange，提问作者Pat Racco