Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Vary header is being overwritten by Next causing CDN issues [1 comments, 2 participants]

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…
GitHub stats
vercel/next.js#85998•Fetched 2026-04-08 02:13:07
View on GitHub
Comments
1
Participants
2
Timeline
6
Reactions
0
Author
hbystrom91hbystrom91
Participants
github-actions[bot]github-actions[bot]hbystrom91hbystrom91
Timeline (top)
labeled ×2closed ×1commented ×1issue_type_added ×1

Root Cause

Not being able to do this causes our CDN not being able to invalidate cache based on the Vary tag. Since it also compresses all responses, this is needed. By adding compress: true in the next.config.js the appropriate Accept-Encoding entry is added to the Vary header, but we need this to happen at the CDN level. Right now we cannot compress our app router pages, because Next.JS simply doesn't give us the flexibility. There's many other use cases for when flexibility is needed in this regard.

Code Example

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:33:00 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 22.20.0
  npm: 10.9.3
  Yarn: N/A
  pnpm: 10.18.3
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/hbystrom91/next-vary-header-content-encoding-bug

To Reproduce

  1. Start the application using the README.md instructions
  2. Navigate to the root page and open the networks tab
  3. Inspect the Vary header

Current vs. Expected behavior

Current behavior <img width="595" height="350" alt="Image" src="https://github.com/user-attachments/assets/4e71ae88-a5a9-400e-a4d2-98b5040670f9" />

Looking at the image, you can see that the arbitrary header is added, but the X-Foo entry isn't appended to the Vary header.

Expected behavior The Vary header should contain the X-Foo header.

Not being able to do this causes our CDN not being able to invalidate cache based on the Vary tag. Since it also compresses all responses, this is needed. By adding compress: true in the next.config.js the appropriate Accept-Encoding entry is added to the Vary header, but we need this to happen at the CDN level. Right now we cannot compress our app router pages, because Next.JS simply doesn't give us the flexibility. There's many other use cases for when flexibility is needed in this regard.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.1.0: Mon Oct 20 19:33:00 PDT 2025; root:xnu-12377.41.6~2/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 22.20.0
  npm: 10.9.3
  Yarn: N/A
  pnpm: 10.18.3
Relevant Packages:
  next: 16.0.1 // Latest available version is detected (16.0.1).
  eslint-config-next: N/A
  react: 19.2.0
  react-dom: 19.2.0
  typescript: 5.9.3
Next.js Config:
  output: N/A

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

Headers

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

next start (local), Other (Deployed)

Additional context

This seems to have been an issue before, with multiple similar issues being reported. More recently, there's a similar issue filed here: https://github.com/vercel/next.js/issues/85852

extent analysis

TL;DR

The issue can be mitigated by manually setting the Vary header in the Next.js configuration or using a custom middleware to append the required header.

Guidance

  • Review the Next.js documentation for custom header configuration to see if there's an option to append to the Vary header.
  • Consider using a custom middleware function in Next.js to manually set or append to the Vary header for specific routes or requests.
  • Investigate the next.config.js file for any existing configurations that might be overriding or affecting the Vary header.
  • Check the Vercel issue tracker for any updates or workarounds related to issue #85852, which seems to be related to the problem at hand.

Example

No specific code example can be provided without making assumptions about the implementation details, but a custom middleware in Next.js might look something like this:

// This is a hypothetical example and may need adjustments
import { NextResponse } from 'next/server';

export function middleware(request) {
  const response = NextResponse.next(request);
  response.headers.set('Vary', 'X-Foo');
  return response;
}

Notes

The provided information suggests that this issue might be a known limitation or bug in Next.js, and a custom solution or workaround might be necessary until an official fix is available.

Recommendation

Apply a workaround by using a custom middleware to append the required X-Foo header to the Vary header, as this seems to be the most direct way to address the issue given the current limitations of Next.js.

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…
#LLM response#prompt template#agent execution#callback error#memory management

Still need to ship something?

×6

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

Back to top recommendations

TRENDING