headers

The headers function allows you to read the HTTP incoming request headers from a Server Component ↗.

headers()

This API extends the Web Headers API ↗. It is read-only, meaning you cannot set / delete the outgoing request headers.

app/page.tsx

import { headers } from 'next/headers'
 
export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')
 
  return <div>Referer: {referer}</div>
}

Good to know:

• headers() is a Dynamic Function ↗ whose returned values cannot be known ahead of time. Using it in a layout or page will opt a route into dynamic rendering ↗ at request time.

API Reference

const headersList = headers()

Parameters

headers does not take any parameters.

Returns

headers returns a read-onlyWeb Headers ↗ object.

• Headers.entries() ↗: Returns an iterator ↗ allowing to go through all key/value pairs contained in this object.
• Headers.forEach() ↗: Executes a provided function once for each key/value pair in this Headers object.
• Headers.get() ↗: Returns a String ↗ sequence of all the values of a header within a Headers object with a given name.
• Headers.has() ↗: Returns a boolean stating whether a Headers object contains a certain header.
• Headers.keys() ↗: Returns an iterator ↗ allowing you to go through all keys of the key/value pairs contained in this object.
• Headers.values() ↗: Returns an iterator ↗ allowing you to go through all values of the key/value pairs contained in this object.

Examples

Usage with Data Fetching

headers() can be used in combination with Suspense for Data Fetching ↗.

app/page.js

import { headers } from 'next/headers'
 
async function getUser() {
  const headersInstance = headers()
  const authorization = headersInstance.get('authorization')
  // Forward the authorization header
  const res = await fetch('...', {
    headers: { authorization },
  })
  return res.json()
}
 
export default async function UserPage() {
  const user = await getUser()
  return <h1>{user.name}</h1>
}

Version History