headers

La función headers permite leer las cabeceras (headers) de solicitud HTTP entrantes desde un Componente de Servidor (Server Component).

headers()

Esta API extiende la Web Headers API. Es de solo lectura, lo que significa que no puedes usar set / delete en las cabeceras de solicitud salientes.

import { headers } from 'next/headers'

export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')

  return <div>Referer: {referer}</div>
}

import { headers } from 'next/headers'

export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')

  return <div>Referer: {referer}</div>
}

Es bueno saber:

• headers() es una Función Dinámica (Dynamic Function) cuyos valores devueltos no pueden conocerse de antemano. Usarla en un layout o página activará renderizado dinámico (dynamic rendering) en tiempo de solicitud.

Referencia de API

const headersList = headers()

Parámetros

headers no recibe ningún parámetro.

Retorna

headers retorna un objeto Web Headers de solo lectura.

• Headers.entries(): Retorna un iterador que permite recorrer todos los pares clave/valor contenidos en este objeto.
• Headers.forEach(): Ejecuta una función proporcionada una vez por cada par clave/valor en este objeto Headers.
• Headers.get(): Retorna una secuencia String con todos los valores de una cabecera dentro de un objeto Headers con un nombre dado.
• Headers.has(): Retorna un booleano que indica si un objeto Headers contiene una cabecera específica.
• Headers.keys(): Retorna un iterador que permite recorrer todas las claves de los pares clave/valor contenidos en este objeto.
• Headers.values(): Retorna un iterador que permite recorrer todos los valores de los pares clave/valor contenidos en este objeto.

Ejemplos

Uso con Obtención de Datos (Data Fetching)

headers() puede usarse en combinación con Suspense para Obtención de Datos (Suspense for Data Fetching).

import { headers } from 'next/headers'

async function getUser() {
  const headersInstance = headers()
  const authorization = headersInstance.get('authorization')
  // Reenviar la cabecera de autorización
  const res = await fetch('...', {
    headers: { authorization },
  })
  return res.json()
}

export default async function UserPage() {
  const user = await getUser()
  return <h1>{user.name}</h1>
}

Historial de Versiones