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?

for client side changes you need to restart the script? Or are you referring to when you make server side changes? — Chaim Friedman, May 01 '17 at 14:30
Possible duplicate of [Auto-reload of files in Node.js](http://stackoverflow.com/questions/1972242/auto-reload-of-files-in-node-js) — jmargolisvt, May 01 '17 at 14:36
That's the thing.. I'm really new to this whole "universal javascript" ecosystem provided by next.js. I'm not sure if it's server side or client side. I modified a js file inside /pages folder in a next.js project. I'm guessing it's client side because it only contains react stuff? — develobster, May 01 '17 at 14:40
Nodemon will refresh on either server- or client-side code changes. It's pretty simple to install, so give it a go. — jmargolisvt, May 01 '17 at 14:43

score 30 · Accepted Answer · answered Jun 23 '17 at 15:23

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

score 15 · Answer 2 · edited Oct 13 '20 at 20:56

15

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.

edited Oct 13 '20 at 20:56

Jared Forth

1,577
6
17
32

answered Oct 13 '20 at 15:41

Ben Quirk

159
1
4

I made my day bro – Mrinal Verma Mar 01 '21 at 10:22
2

it should at least show an error for that or should not import it – Mrinal Verma Mar 01 '21 at 10:22
This was exactly my problem. I'd rather have gotten an error from the typo – Filipe Aleixo Jul 14 '21 at 08:02
I was struggling with this issue for a couple of hours. there was a problem with the naming convention. Thank you Ben Quirk – Gagandeep Sep 10 '21 at 15:25
confirmed happend to me as well! i used (uppercase) but imported /input (lowercase) and when i save, the contents in localhost doesnt update, but console doesn't throw any error (using windows) – rickvian Nov 09 '21 at 14:15
WHAT THE •••• ... Why its done like this? I spent few hours looking why it doesnt work :( Thanks for pointing me out – Meiblorn Jan 22 '22 at 03:09

score 5 · Answer 3 · answered May 06 '17 at 09:39

5

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

answered May 06 '17 at 09:39

Rudi

2,987
1
12
18

3

I don't think I used a custom server. I'm running next.js inside a vagrant box (Ubuntu 14.04) on a Windows 10 host. I followed the tutorial in learnnextjs.com and did nothing extraordinary.. – develobster May 09 '17 at 04:44

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

3 Answers3