# How to get the Request headers in Next.js app router

> Learn how to read request headers in the Next.js app router using the headers() function from next/headers in a Server Component, then pass them to clients.

Author: Flavio Copes | Published: 2024-09-18 | Canonical: https://flaviocopes.com/how-to-get-the-request-headers-in-nextjs-app-router/

Here’s how to retrieve request headers in [Next.js](https://flaviocopes.com/nextjs/) (app router).

To access request headers, use the 'headers' function from the 'next/headers' package:

```javascript
import { headers } from 'next/headers'

export default function MyComponent() {
  const headersList = headers()
  const referer = headersList.get('referer')
  
  return <div>Referer: {referer}</div>
}
```

The 'headers' function is read-only (to set headers, use middleware or the 'next/server' package).

Note that this function only works in Server Components. 

For client components, you need to pass the headers from a server component, for example via props:

```javascript
import { headers } from 'next/headers'
import ClientComponent from './ClientComponent'

export default function ServerComponent() {
  const headersList = headers()
  const userAgent = headersList.get('user-agent')

  return <ClientComponent userAgent={userAgent} />
}
```

```javascript
'use client'

export default function ClientComponent({ userAgent }) {
  return <div>User Agent: {userAgent}</div>
}
```

Remember that you should only pass the specific header information needed by the client component, rather than the entire headers object, to maintain security and minimize data transfer.