Nextjs - Getting the referer as null sometimes when reading from the next headers

[rakeshneelarapu]

Link to the code that reproduces this issue

https://github.com/rakeshneelarapu/nextjs-headers

To Reproduce

1. checkout the project
2. npm install
3. npm run dev
4. open the browser on localhost:3000
5. check the referer is printed on the UI sometimes and upon refreshing the browser, we re getting the value as null consistently

Working Example

Not Working Example

Current vs. Expected behavior

Bug: Referer is coming as null when reading from the next/headers

Expected Behaviour: Referer should be fetched correctly when reading from the next/headers

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 18.7.0: Tue Jun 22 19:37:08 PDT 2021; root:xnu-4903.278.70~1/RELEASE_X86_64
Binaries:
  Node: 20.10.0
  npm: 10.2.3
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.3
  eslint-config-next: 14.0.3
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.3.2
Next.js Config:
  output: N/A

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

App Router, Routing (next/router, next/navigation, next/link)

Additional context

Sometimes when we hot reload the server or make any changes in the component files, it works fine, but most of the times, we see this issue of null

[frankie-ug]

Currently facing the same issue. A workaround might be to use nextjs middleware

import { NextResponse } from 'next/server';

export function middleware(request: Request) {
  const requestHeaders = new Headers(request.headers);
  requestHeaders.set('my-url', request.url);

  return NextResponse.next({
    request: {
      headers: requestHeaders,
    },
  });
}

Then you can do:
const myUrl = headersList.get('my-url');

[desmati]

At times, headers() returns no headers whatsoever. This problem isn't limited to just the referer header; I'm experiencing it with other headers like next-url as well.

Even using middleware hasn't resolved the issue; I'm consistently receiving empty headers in certain instances.

[TomasSestak]

can confirm this

[SimRunBot]

for me referals from twitter are null in the headers.get("referer") object

however i suspect it is because of twitters handling of outgoing links

[contigen]

Getting the referer header in Next.js layout returns null for subsequent requests/renders, is there a fix? @leerob

[GeekMikle]

I´ve been able to reproduce this issue on my end too. Facing the same error.

[MantasJa]

having the same problem in Nextjs middleware, I get null all the time.