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
Common Causes
- Using query parameters in image URLs without stable naming (changing URLs prevent caching)
- Cache-Control headers set to no-cache or very short expiry for optimized images
- Image filename/path changes but URL remains same, serving stale cached version
- Dynamic image URLs (different URL for same image) preventing cache hit
- 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.
Daniel Vázquez
Software Engineer with over 10 years of experience on Startups, Government, big tech industry & consulting.
Nam Tran
10 years as fullstack developer
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.
David Olverson
Solo dev shipping production apps with AI-assisted development. I specialize in rescuing broken Lovable/Bolt/Cursor builds and taking them to production. 10+ apps shipped including SaaS CRMs, gaming platforms, real estate tools, and Discord bots. Stack: Next.js 16, TypeScript, Tailwind CSS, FastAPI, PostgreSQL, Prisma. I use Claude Code with 50+ custom skills for rapid delivery. Average turnaround: 2-4 weeks from broken prototype to production.
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.
Basel Issmail
’m a Senior Full-Stack Developer and Tech Lead with experience designing and building scalable web platforms. I work across the full development lifecycle, from translating business requirements into technical architecture to delivering reliable production systems.
My work focuses on modern web technologies, including TypeScript, Angular, Node.js, and cloud-based architectures. I enjoy solving complex technical problems and helping teams turn product ideas and prototypes into working platforms that can grow and scale.
In addition to development, I often collaborate closely with product managers, business analysts, designers, and QA teams to ensure that solutions align with both technical and business goals.
I enjoy working with startups and product teams where I can contribute both as a hands-on engineer and as a technical partner in designing and delivering impactful software.
Luca Liberati
I work on monoliths and microservices, backends and frontends, manage K8s clusters and love to design apps architecture
Jared Hasson
Full time lead founding dev at a cyber security saas startup, with 10 yoe and a bachelor's in CS. Building & debugging software products is what I've spent my time on for forever
Bastien Labelle
Full stack dev w/ 20+ years of experience
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.
You don't need to be technical. Just describe what's wrong and a verified developer will handle the rest.
Get HelpFrequently 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.