Next.js Discord

Discord Forum

How to implement auto reload on changes in Next.js?

Unanswered
Ocicat posted this in #help-forum
Open in Discord
OcicatOP
Hi. This is a rather beginner question. I want to make development more convenient and have my project reloaded on component changes, just like in React. Some time ago at work I used some watcher from npm to execute next build commands, but I feel like there should be a better way. I've read about Fast Refresh in Next.js, but according to docs it should work automatically on 9.4 or newer. I don't see that happening even tho I have 13 or something. Thank you in advance.

7 Replies

OcicatOP
So what should happen is whenever I edit a component, regardless if its TypeScript or JavaScript, it should just reload changes?
@Ocicat So what should happen is whenever I edit a component, regardless if its TypeScript or JavaScript, it should just reload changes?
`${ViNoS}`
yes, whenever you save your code, you can see in your terminal something like:
then wait a bit and your page will be loaded automatically (not a full reload, that's why we call it hot reloading, and that's why it's cool)
OcicatOP
Yeah I see. Do all folders and files have to have lowercase name? And what about imports? Should syntax look like this? 
import Box from '../Components/Box';

instead of 
import Box from '../Components/box';
For context I use shadcn ui also
@Ocicat Yeah I see. Do all folders and files have to have lowercase name? And what about imports? Should syntax look like this? import Box from '../Components/Box'; instead of import Box from '../Components/box';
`${ViNoS}`
you are totally free, if you name the file Box.tsx then you must import it it path/to/Box, and if you name it box.tsx you must import it as path/to/box
however, it's better to use same naming convention to make it easier for you
ping me when replying