I am wondering what would the difference be between npm run dev and npm run start. To my surprise, I could not find much information online about this topic.

Specifically, I'd like to know in the context of React and Next JS.

I noticed that with React, you can start your app by running npm run start, without the need of running a build first. On the other hand, Next JS doesn't seem to behave in the same way (but I could have done something wrong with the setup). I tried running a new Next app using npm run start, as it's a default script in package.json, but it didn't work. It shows this error: *Error: Could not find a production build*

Instead, running npm run dev created a .next folder, and started the server on port 3000 with no issues.

Can anyone help me understand how this works?

CodePudding user response：

TL;DR: In Next.js, next dev is used to run the app in development mode. On the other hand, next start is used to run the app in production mode, but requires next build to be run first to generate an optimized production build.

Development

When running the Next.js app in development, you'll want to use next dev:

next dev starts the application in development mode with hot-code reloading, error reporting, and more.

Production

When building the Next.js app for production, you'll want to use next build:

next build creates an optimized production build of your application. The output displays information about each route.

• Size – The number of assets downloaded when navigating to the page client-side. The size for each route only includes its dependencies.
• First Load JS – The number of assets downloaded when visiting the page from the server. The amount of JS shared by all is shown as a separate metric.

Followed by either next start, when you want to start the production server:

next start starts the application in production mode. The application should be compiled with next build first.

Or next export, when exporting the app as static HTML:

next export allows you to export your app to static HTML, which can be run standalone without the need of a Node.js server.

For more information refer to Next.js CLI docs.

CodePudding user response：

Normally this depend on what is written in your package.json file. For example, in my case, within this file I got:

  "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"
  },

so, if I run

npm run watch

I'll be compiling for development and it will be executed:

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

However, if I run

npm run build

it will be executed:

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

and it will compile for production.