nextjs - 💡(How to fix) Fix next/image in dev can keep showing stale local image after editing same file until `.next` is deleted and dev server restarted

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…

Fix Action

Fix / Workaround

Workarounds:

  • rename the image file
  • delete .next and restart the dev server

Code Example

Please run `next info` in the reproduction repo and replace this block with the output.
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/Austin1serb/next.js-minimal-build

To Reproduce

  1. Clone the reproduction repo.
  2. Install dependencies.
  3. Start the app in development mode with next dev.
  4. Open the page in the browser.
  5. Observe that the page renders the same local image twice: once with next/image and once with a plain <img>.
  6. Edit the source image file used by both elements without changing its filename. For example, crop it or apply a visible filter.
  7. Refresh the page.
  8. Observe that the plain <img> reflects the updated image, but next/image continues showing the old version.
  9. Rename the image file or delete .next and restart the dev server.
  10. Observe that next/image then shows the updated image.

Current vs. Expected behavior

Following the steps above, I expect both next/image and plain <img> to reflect the updated local file in development after the image contents change.

Instead, only the plain <img> updates. next/image continues to show a stale version of the image when the file contents change but the filename stays the same.

In my testing:

  • plain <img> updates correctly
  • next/image stays stale
  • renaming the image file fixes it
  • deleting .next and restarting next dev also fixes it

This makes it look like development mode is not invalidating cached or optimized output for a changed local image when the path remains unchanged.

Provide environment information

Please run `next info` in the reproduction repo and replace this block with the output.

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

Image, Development mode

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

next dev

Additional context

This is specifically about local development.

The reproduction demonstrates a difference between next/image and a plain <img> using the same local source image:

  • next/image does not update after editing the image file if the filename stays the same
  • plain <img> does update

Workarounds:

  • rename the image file
  • delete .next and restart the dev server

I have not yet bisected canary versions to identify the first version where this started.

extent analysis

TL;DR

Delete the .next directory and restart the development server with next dev to force next/image to update with the latest image changes.

Guidance

  • Verify that the issue is specific to next/image by comparing its behavior with a plain <img> tag, as described in the reproduction steps.
  • Check if renaming the image file updates next/image correctly, as this is a known workaround.
  • Try deleting the .next directory and restarting the development server to see if this resolves the issue, as it is another known workaround.
  • Consider bisecting canary versions to identify the first version where this issue started, to help with debugging and potentially finding a more permanent fix.

Example

No specific code snippet is necessary for this issue, as the problem is related to the behavior of next/image in development mode rather than a code error.

Notes

This issue appears to be specific to development mode and local image files, and the provided workarounds (renaming the image file or deleting .next and restarting the server) can mitigate the problem. However, the root cause and a permanent fix are not yet identified.

Recommendation

Apply the workaround of deleting the .next directory and restarting the development server, as this is a straightforward and effective way to ensure next/image updates with the latest image changes in development mode.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - 💡(How to fix) Fix next/image in dev can keep showing stale local image after editing same file until `.next` is deleted and dev server restarted