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 set / delete 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 hará que la ruta opte por renderizado dinámico (dynamic rendering) en el momento de la solicitud.

Referencia de API

const headersList = headers()

Parámetros

headers no toma ningún parámetro.

Retorna

headers retorna un objeto Web Headers de solo lectura.

• Headers.entries(): Retorna un iterator 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 de 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 iterator que permite recorrer todas las claves de los pares clave/valor contenidos en este objeto.
• Headers.values(): Retorna un iterator 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 { Suspense } from 'react'
import { headers } from 'next/headers'

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

  return <h1>{user.name}</h1>
}

export default function Page() {
  return (
    <Suspense fallback={null}>
      <User />
    </Suspense>
  )
}

Dirección IP

headers() puede usarse para obtener la dirección IP del cliente.

import { Suspense } from 'react'
import { headers } from 'next/headers'

function IP() {
  const FALLBACK_IP_ADDRESS = '0.0.0.0'
  const forwardedFor = headers().get('x-forwarded-for')

  if (forwardedFor) {
    return forwardedFor.split(',')[0] ?? FALLBACK_IP_ADDRESS
  }

  return headers().get('x-real-ip') ?? FALLBACK_IP_ADDRESS
}

export default function Page() {
  return (
    <Suspense fallback={null}>
      <IP />
    </Suspense>
  )
}

Además de x-forwarded-for, headers() también puede leer:

• x-real-ip
• x-forwarded-host
• x-forwarded-port
• x-forwarded-proto

Historial de Versiones