hot reload or fast-refresh in my nextjs 15.2.3 project does not work
Unanswered
Asian black bear posted this in #help-forum
Asian black bearOP
Not sure what is the correct technical term, but when I was changing a component in my previous nextjs (v 14) the browser quickly received the update without a full reload.
After upgraded to 15.2.3 and using this for dev development: next dev --turbo --hostname 0.0.0.0
I do not get the change in components detected anymore and page doesn't reload the component, nor it does a full refresh. In fact, if I change the layout.js (app router) I see a new message in the terminal saying Compiled (so change gets detected) but the browser doesn't see the change. I changed something obvious like body background color and I only see the change after I manually refresh the browser.
So:
1. layout change -> terminal shows the change is detected and recompiles -> but browser doesn't reflect the change
2. component change -> neither terminal nor browser react to change.
I did try the same with a newly created nextjs 15 project, and it works in fact.
also attached my app structure.
so something from my project, prevents the change detection to work.
How do I go to debugging and fixing this?
PS: I do not want to go back to nextjs 14.
Thank you!
After upgraded to 15.2.3 and using this for dev development: next dev --turbo --hostname 0.0.0.0
I do not get the change in components detected anymore and page doesn't reload the component, nor it does a full refresh. In fact, if I change the layout.js (app router) I see a new message in the terminal saying Compiled (so change gets detected) but the browser doesn't see the change. I changed something obvious like body background color and I only see the change after I manually refresh the browser.
So:
1. layout change -> terminal shows the change is detected and recompiles -> but browser doesn't reflect the change
2. component change -> neither terminal nor browser react to change.
I did try the same with a newly created nextjs 15 project, and it works in fact.
also attached my app structure.
so something from my project, prevents the change detection to work.
How do I go to debugging and fixing this?
PS: I do not want to go back to nextjs 14.
Thank you!
3 Replies
Asian black bearOP
I updated now to 15.3.0-canary.20. now, I also found out that if I remove the .next folder, then refresh, then modify the component, I get the hot-reload / fast-refresh to work and I can see the terminal reacting with "Compiled in 166ms" and also browser reflecting the change (without full reload). So as it should
however, after a little while, like few minutes, not sure what changes, maybe I browse from one page to another or not sure, it stops working. and then I need to remove .next folder again, start the dev server again, and full reload.
it seems very fragile, and I can't tell what makes it stop working