I'm new to Next.js and web development in general, so please bear with me if my question seems basic. I've followed the installation guide and successfully created my first Next.js app. However, I'm encountering an issue with auto-reloading after making changes to page.js file located in src/app/page,js .
Problem: After modifying the file in my project using Visual Studio Code and saving it, I expect to see the changes reflected in my browser automatically. However, the changes only appear when I stop and restart the development server using npm run dev.
What I've tried: I've ensured that I'm saving the file after making changes. I've looked into the documentation and forums to understand if there's any additional configuration required for automatic reloading, but I couldn't find a solution.
My setup: I opted not to include TypeScript and Tailwind CSS when creating the Next.js app using the command npx create-next-app@latest. That's all the changes I've made. I'm using Visual Studio Code as my code editor. I'm running the development server using npm run dev.
This video shows my issue: https://streamable.com/fmr0p0
I fixed it. This is embarrassing but since I'm very new to this I didn't know. I'm using WSL. This whole time I was using and storing my files on Windows. If anyone's encountering this issue, it is because you need to store your files somewhere inside Ubuntu/Linux. The /home directory would be fine.