nextjs - 💡(How to fix) Fix Global CSS file having hot reload issue in new NextJS update - 16.1.1 [5 comments, 6 participants]

Link to the code that reproduces this issue

https://github.com/tanishqkrk/next.js

To Reproduce

npm install npm run dev

Current vs. Expected behavior

I created a new NextJS project with the latest flag. Usually my go it is reset the css file and start fresh, this time when I deleted some CSS code and saved the file it didn't hot reload the page, I thought it might've been a cache bug, cleared everything, restarted my server and my browser, did a dozen things, it didn't work.

The hot reload was either only working when any file other than the globals.css file was being changed and saved OR the globals.css file had to be saved twice in which case the save trace was one step behind. So for example if added a background: black; to the and save it won't hot reload, but when I comment that line, save, it hot reloads but it shows the background as black since the previous save had that code.

https://player.cloudinary.com/embed/?cloud_name=debb5frn9&public_id=2025-12-29_09-36-39_uyphgr&profile=cld-default

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 16106
  Available CPU cores: 16
Binaries:
  Node: 20.17.0
  npm: 10.8.2
  Yarn: N/A
  pnpm: 9.9.0
Relevant Packages:
  next: 16.0.7 // There is a newer version (16.1.1) available, upgrade recommended! 
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

CSS

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

https://player.cloudinary.com/embed/?cloud_name=debb5frn9&public_id=2025-12-29_09-36-39_uyphgr&profile=cld-default