Next.js : Refresh page after modifying a file, without rerunning 'npm run'

Question

I've been building websites using a normal LAMP stack with javascript (and jQuery) for the frontend for quite a while. But I wanted to try using javascript for the backend as well. I'm just starting to learn next.js.

On the old way, if I have modified a php file, to see the effect I can just refresh the web browser. But I noticed that with next.js you can't see the change immediately. I have to stop the npm script, rerun the "npm run xxx" command, then refresh the browser. It's kind of time consuming.

Is there a way to automate this process?

Answer 1

@Rudi's answer is correct, and I'll add to that that you want to make sure the command you're ultimately running is next , not next start . The difference is that next is for development mode, whereas next start is for production mode. In production mode, it doesn't watch your files for changes.

Typically, you have these commands referenced in the scripts section of package.json:

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

And then the command you would actually type in and run would be npm run dev for local development or npm run build; npm run start npm run build; npm run start for production mode.

If this doesn't hold for your usage, and you have to restart the server even in development mode, then there may be something wrong with your setup.

Answer 2

One common issue that causes this has to do with accidentally importing a component and making a minor typo with lowercase/uppercase naming conventions.

For example, you import a component named Navigation , as navigation .

This will still import Navigation , but the live reloading will be broken.

Answer 3

In development mode, Next.js by default will hotreload any changes, you don't even need to refresh the browser.

But if you add a custom server, it doesn't hotreload changes to that. You can use nodemon to watch and restart the server: https://github.com/remy/nodemon