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

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.

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

@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 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.