Next/Image In Dev Does Not Update Local Image After File Edit With Same Filename
In Next.js development mode, the image optimizer caches by URL only. When a local image file's contents change but the filename stays the same, the cached optimized image is served stale. This affects only next/image, while a plain <img> tag with the same source updates correctly.
The image optimization endpoint caches results using a key derived solely from the upstream URL, width, and quality, without incorporating file modification time or content hash. Since the URL remains unchanged when the file content changes, the cache returns the old image.
1. Clone the reproduction repo at https://github.com/Austin1serb/next.js-minimal-build.
2. Run `npm install` and then `npm run dev`.
3. Open the page that renders the same local image using both `next/image` and a plain `<img>`.
4. Edit the source image file (e.g., change its pixel content) without changing its filename.
5. Refresh the browser page.
6. Observe that the plain `<img>` shows the updated image, but `next/image` still displays the old version.
Fixing Code Block
// next.config.js
module.exports = {
images: {
// Disable image optimization in development to avoid stale cache for local files
unoptimized: process.env.NODE_ENV === 'development',
},
}
Setting `images.unoptimized` to true in development bypasses the image optimization pipeline entirely, serving the original file directly. This eliminates the stale cache because the browser uses normal HTTP caching for the static file, which revalidates based on file changes. In production, optimization remains enabled.
Edge Case Audit
This workaround disables image optimization in development, which means no automatic resizing, compression, or format conversion. It may affect performance profiling if you rely on optimized images during development. To roll back, remove the `unoptimized` flag or set it to false. If you still need optimization in dev, consider clearing the `.next/cache/images` directory on file changes or restarting the dev server. The root cause remains unfixed in Next.js core.
