2

I've created my first NextJS app. It's a basic default app created with [npx create-next-app]. I'm using VS Code as my IDE. When I update code on index.tsx, I need to execute [npm run build] from the cmd and then reload the browser in order for my code updates to reflect in the browser.

When I save changes to a React app component in VS Code, I don't need to run a build command. I can just refresh the browser and my changes are reflected. What is the easiest way for me to configure my NextJS app with the same behavior? Essentially eliminating the need for me to run a build command before my changes are reflected in the browser? I googled "nextjs auto build on save" but that didn't seem to return any relevant results.

user19634493
  • 61
  • 4
  • You should use `npm run dev` during development (which runs `next dev`) that provides hot-code reloading. `next build && next start` is used to start the app in production mode. See [What's the difference between npm run dev and npm run start in Next.js?](https://stackoverflow.com/questions/69400243/whats-the-difference-between-npm-run-dev-and-npm-run-start-in-next-js). – juliomalves Jul 31 '22 at 00:12

1 Answers1

1

I'm wondering what script you are using to run your development environment?

As a quick rundown - using a typical npx setup, there are three commands that complete the picture:

The first one is "next build", this commands compiles your project and saves it into your output folder - by default /.next.

"next start" would then take the files in the .next folder and start a server instance with them.

"next dev" however is what you want - it has auto-compilation, etc.

I would add these as a script in your package.json.

"dev": "cross-env NODE_ENV=development next dev",
"build": "cross-env NODE_ENV=production next build",
"start": "next start",
polisen
  • 275
  • 1
  • 7
  • since you created the app using npx create-next-app, it will set up the necessary configuration needed for your app. so no need to run npm build whenever you make a change to your code instead start a development server locally by using the command ```npm run dev```, this will start a development server which will monitor your changes automatically. i hope this helps – abdulkareem alabi Jul 30 '22 at 02:04