v0 performance

Next.js Image Optimization Cache Not Working

Next.js Image component caching isn't working properly. Updated images still show old versions, or image optimization isn't triggered when source images change. Users see stale content.

Image caching issues occur when cache headers aren't properly configured, image paths change unexpectedly, or Vercel's Image Optimization API cache isn't invalidated.

Error Messages You Might See

Image cache not invalidating Stale images being served [Image] Cache control not set Cached image not updating
Image cache not invalidatingStale images being served[Image] Cache control not setCached image not updating

Common Causes

  1. Using query parameters in image URLs without stable naming (changing URLs prevent caching)
  2. Cache-Control headers set to no-cache or very short expiry for optimized images
  3. Image filename/path changes but URL remains same, serving stale cached version
  4. Dynamic image URLs (different URL for same image) preventing cache hit
  5. Vercel Image Optimization cache not automatically invalidating on deployment

How to Fix It

Use stable URLs: Keep image URLs consistent. If image content changes, include hash in filename: avatar-abc123.jpg

Configure cache headers: In next.config.js, set long cache for optimized images:
headers: async () => [{ source: '/assets/**', headers: [{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }] }]

Use Image version parameter: In development, append query string: <Image src={url + '?v=' + Date.now()} /> to bust cache.

Deploy to invalidate: Vercel automatically invalidates image cache on new deployment.

Real developers can help you.

Simon A. Simon A. I'm a backend developer building APIs, emulators, and interactive game systems. Professionally, I've developed Java/Spring reporting solutions, managed relational and NoSQL databases, and implemented CI/CD workflows. Yovel Cohen Yovel Cohen I got a lot of experience in building Long-horizon AI Agents in production, Backend apps that scale to millions of users and frontend knowledge as well. Franck Plazanet Franck Plazanet I am a Strategic Engineering Leader with over 8 years of experience building high-availability enterprise systems and scaling high-performing technical teams. My focus is on bridging the gap between complex technology and business growth. Core Expertise: 🚀 Leadership: Managing and coaching teams of 15+ engineers, fostering a culture of accountability and continuous improvement. 🏗️ Architecture: Enterprise Core Systems, Multi-system Integration (ERP/API/ETL), and Core Database Structure. ☁️ Cloud & Scale: AWS Expert; architected systems handling 10B+ monthly requests and managing 100k+ SKUs. 📈 Business Impact: Aligning tech strategy with P&L goals to drive $70k+ in monthly recurring revenue. I thrive on "out-of-the-box" thinking to solve complex technical bottlenecks and am always looking for ways to use automation to improve business productivity. Dor Yaloz Dor Yaloz SW engineer with 6+ years of experience, I worked with React/Node/Python did projects with React+Capacitor.js for ios Supabase expert Luca Liberati Luca Liberati I work on monoliths and microservices, backends and frontends, manage K8s clusters and love to design apps architecture BurnHavoc BurnHavoc Been around fixing other peoples code for 20 years. MFox MFox Full-stack professional senior engineer (15+years). Extensive experience in software development, qa, and IP networking. Rudra Bhikadiya Rudra Bhikadiya I build and fix web apps across Next.js, Node.js, and DBs. Comfortable jumping into messy code, broken APIs, and mysterious bugs. If your project works in theory but not in reality, I help close that gap. hanson1014 hanson1014 Full-stack developer experienced in fixing and deploying AI-generated apps from Lovable, Bolt.new, Cursor, and Replit. I specialize in debugging Supabase integration issues (auth flows, RLS policies, database connections), fixing broken deployments, resolving routing/blank screen problems, and cleaning up messy React/Vite codebases. I also build production apps with the Claude API and have shipped a Mac desktop dev tool (Nexterm from scratch. Based in Hong Kong, fast turnaround. Taufan Taufan I’m a product-focused engineer and tech leader who builds scalable systems and turns ideas into production-ready platforms. Over the past years, I’ve worked across startups and fast-moving teams, leading backend architecture, improving system reliability, and shipping products used by thousands of users. My strength is not just writing code — but connecting product vision, technical execution, and business impact.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help

Frequently Asked Questions

How long should images be cached?

For static images: max-age=1 year (31536000 seconds). For dynamic avatars: max-age=1 day or use version query param.

Why is my updated image still showing old version?

URL is cached. Change filename or add ?v=timestamp to force cache bust. Next.js Image caches based on URL.

Does Vercel Image Optimization cost extra?

Free tier: 1000 optimizations/month. Paid: $0.15 per 10,000 additional. Caching reduces cost.

Related v0 Issues

Can't fix it yourself?
Real developers can help.

You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.

Get Help