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 uniterator
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 objetoHeaders
.Headers.get()
: Retorna una secuenciaString
de todos los valores de una cabecera dentro de un objetoHeaders
con un nombre dado.Headers.has()
: Retorna un booleano que indica si un objetoHeaders
contiene una cabecera específica.Headers.keys()
: Retorna uniterator
que permite recorrer todas las claves de los pares clave/valor contenidos en este objeto.Headers.values()
: Retorna uniterator
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
Versión | Cambios |
---|---|
v13.0.0 | Se introdujo headers . |