headers

La fonction headers permet de lire les en-têtes de requête HTTP entrants depuis un Composant Serveur.

headers()

Cette API étend l'API Web Headers. Elle est en lecture seule, ce qui signifie que vous ne pouvez pas set / delete les en-têtes de requête sortants.

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>
}

Bon à savoir :

• headers() est une Fonction Dynamique dont les valeurs retournées ne peuvent pas être connues à l'avance. Son utilisation dans un layout ou une page activera le rendu dynamique au moment de la requête.

Référence API

const headersList = headers()

Paramètres

headers ne prend aucun paramètre.

Retour

headers retourne un objet Web Headers en lecture seule.

• Headers.entries() : Retourne un itérateur permettant de parcourir toutes les paires clé/valeur contenues dans cet objet.
• Headers.forEach() : Exécute une fonction fournie une fois pour chaque paire clé/valeur dans cet objet Headers.
• Headers.get() : Retourne une séquence String de toutes les valeurs d'un en-tête dans un objet Headers avec un nom donné.
• Headers.has() : Retourne un booléen indiquant si un objet Headers contient un certain en-tête.
• Headers.keys() : Retourne un itérateur permettant de parcourir toutes les clés des paires clé/valeur contenues dans cet objet.
• Headers.values() : Retourne un itérateur permettant de parcourir toutes les valeurs des paires clé/valeur contenues dans cet objet.

Exemples

Utilisation avec la récupération de données

headers() peut être utilisé en combinaison avec Suspense pour la récupération de données.

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

async function User() {
  const authorization = headers().get('authorization')
  const res = await fetch('...', {
    headers: { authorization }, // Transmet l'en-tête d'autorisation
  })
  const user = await res.json()

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

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

Adresse IP

headers() peut être utilisé pour obtenir l'adresse IP du client.

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>
  )
}

En plus de x-forwarded-for, headers() peut aussi lire :

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

Historique des versions