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

rakeshneelarapu commented 9 months ago

Link to the code that reproduces this issue

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

To Reproduce

checkout the project
npm install
npm run dev
open the browser on localhost:3000
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

[X] 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

AdarshKonchady commented 9 months ago

Any updates on this issue?

Edit by maintainers: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

memeteli commented 7 months ago

Any updates? I also have the same issue now.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

frankie-ug commented 7 months ago

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 commented 5 months ago

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.

erkannebil commented 5 months ago

Any updates? I also have the same issue.

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

TomasSestak commented 4 months ago

can confirm this

carlpaten commented 3 months ago

Still experiencing this issue

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!