headers function not getting the header in app directory

Question

I'm using the headers function to get the headers in a react server component in the app directory,
and this is the code for it

// app > success > page.tsx
import { headers } from 'next/headers';

export const dynamic = 'force-dynamic';

export default async function SuccessPage() {
  const headerList = headers();

  console.log(headerList.get('id'));
  return <></>;
}

I'm sending this url localhost:3000/success?id=whatever, and I'm getting the value as null, can anyone help me why is that happening.

joulev · Accepted Answer

id here is a query param, not a header.you access the query param with [the searchParams prop](https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional)

headers function not getting the header in app directory

2 Replies