nextjs - 💡(How to fix) Fix When you have an already existing image in public directory and you add a new file with same name and replace the file, nextjs cant render the new file it will render the old file only with the Image tag [2 comments, 2 participants]

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/quirky-leftpad-mky7vg?workspaceId=ws_Nh9dmghsN2PEKSFNiM3Mk6

To Reproduce

Steps to Reproduce

1. Add an image file (for example, hero.png) to the public/ folder of a Next.js project.

2. Render the image using the Image component from next/image:

   import Image from "next/image";
   
   export default function Page() {
     return (
       <Image
         src="/hero.png"
         alt="Hero"
         width={500}
         height={300}
       />
     );
   }

3. Start the development server and confirm that the image renders correctly in the browser.

4. Replace the image file in the public/ folder with a different image using the same filename (hero.png).

   • Git marks the file as modified.

5. Refresh the browser or restart the Next.js development server.

6. Observe that Next.js still renders the old image, even though the file in the public/ folder has been replaced.

Current vs. Expected behavior

I have uploaded screenshots to illustrate the issue:

1. Rendered Site: Shows the website rendering the old contact.jpg.
   

2. Actual File: Shows the updated contact.jpg in the public/ folder.
   

3. Code: Shows the relevant code where the image is rendered using next/image.
   

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 11 Home
  Available memory (MB): 15558
  Available CPU cores: 16
Binaries:
  Node: 22.16.0
  npm: 11.4.2
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 16.1.1 // Latest available version is detected (16.1.1).
  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)

Image (next/image)

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

next start (local)

Additional context

I am developing a personal portfolio for now and came across this bug. I haven't deployed it anywhere for now.