Custom Cache-Control response header for `/_next/image`
Problem
Bug report Describe the bug When requesting `/_next/image(.)`, I'm getting this Response header: [code block] And it's fine... What's not fine is that I'm getting the same exact Response headers even when I use custom headers in `next.config.js`, i.e.: [code block] To Reproduce Try this `next.config.js` above, with an image that uses common `<img>` tag like this: [code block] And another tag that uses the new `next/image` component, with the same or whatever image url, for example: [code block] And try requesting those images in the browser, and look into `Devtools -> Network` tab, the Response headers, and see that for common `<img>` tag it's actually changed, whereas for new `<Image>` component it is not. Expected behavior For `/_next/image(.)` urls, I expected to see Headers that I setup, i.e. `Cache-Control: public, max-age=180, s-maxage=180, stale-while-revalidate=180`. Screenshots Common `<img>`: New `<Image>`: System information - OS: not applicable / any - Browser (if applies): not applicable / any - Version of Next.js: 10.0.3 - Version of Node.js: 12.18.0 - Deployment: both `next start` on development machine, and actual Vercel deployment (screenshots demonstrate the case with local machine, but I've confirmed that the same is happening on a Vercel deployment) Additional context Originally I created an issue using "Feature request" template, and it got translated into "Idea discussion": https://github.com/vercel/next.js/discussions/19896 (how to d
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Implement Custom Cache-Control for Next.js Image Component
The Next.js image optimization feature uses a built-in image loader that does not respect custom headers set in `next.config.js` for the `/_next/image` route. This is due to the fact that Next.js manages these requests internally and applies its own caching strategy, which overrides user-defined headers.
Awaiting Verification
Be the first to verify this fix
- 1
Update next.config.js
Modify the `next.config.js` file to include custom headers for the `/_next/image` route by using the `async headers()` function.
javascriptmodule.exports = { async headers() { return [{ source: '/_next/image', headers: [{ key: 'Cache-Control', value: 'public, max-age=180, s-maxage=180, stale-while-revalidate=180' }] }] } } } - 2
Clear Cache
Clear your browser cache or disable caching in the DevTools to ensure you are seeing the latest headers after the changes.
- 3
Test Image Requests
Make requests to the `/_next/image` URLs in your application and check the Response headers in the DevTools Network tab to confirm that the custom Cache-Control headers are applied.
- 4
Deploy Changes
Deploy the updated configuration to your production environment (e.g., Vercel) to ensure that the changes are reflected in the live application.
- 5
Verify in Production
After deployment, repeat the image request tests in the production environment and verify that the custom Cache-Control headers are present.
Validation
Confirm that the Response headers for requests to `/_next/image` now include the custom Cache-Control settings as specified. Use the DevTools Network tab to inspect the headers.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep