CODEWITHSUNDEEP
next.js
user19634493
user19634493

Reputation: 81

how to configure auto-build on save for nextjs apps?

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.

Upvotes: 5

Views: 3893

Answers (1)

polisen
polisen

Reputation: 327

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

Upvotes: 4

Related Questions