nextjs - 💡(How to fix) Fix next/image stale cache in development when overwriting files in public/ directory [1 comments, 2 participants]

Link to the code that reproduces this issue

any nextjs project

To Reproduce

1. Start the application in development: npm run dev
2. Open a page that displays an image using <Image src="/my-image.png" width={500} height={300} /> (where the file is in the public/ folder).
3. While the dev server is running, replace the physical file at public/my-image.png with a completely different image file but keep the filename identical.
4. Hard refresh the browser (Ctrl + F5).
5. Observe that the old image is still displayed.
6. Stop and restart the development server—the old image still persists.

Current vs. Expected behavior

Current Behavior: Next.js serves a stale optimized version of the image from the .next/cache/images directory. The internal image optimization cache does not seem to watch for file system changes in the public/ directory when the filename remains the same.

What DOES NOT work to fix it:

• Normal browser refresh.
• Hard browser refresh (Ctrl + F5).
• Restarting the development server (npm run dev).
• Clearing browser cache/cookies.

What DOES work (Workarounds):

• Manually deleting the .next folder or the .next/cache/images subfolder.
• Renaming the file (e.g., image.png -> image-v2.png) and updating the code.

Expected Behavior: Following the steps from the previous section, I expected the new image to be rendered after a file swap in the public/ folder. Next.js should detect the file modification and invalidate the local image cache automatically during development.

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home Single Language
  Available memory (MB): 7522
  Available CPU cores: 12
Binaries:
  Node: 22.21.1
  npm: 11.11.0
  pnpm: 10.33.0
Relevant Packages:
  next: 16.2.4
  react: 19.2.5
  react-dom: 19.2.5
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Image (next/image)

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

next dev (local)

Additional context

This issue is consistently reproducible on Windows 11. It breaks the developer experience when iterating on assets like logos or hero banners, as developers expect a file replacement to be reflected in the UI (HMR) but instead find themselves having to manually clear the .next cache directory multiple times a day.