headers

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

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 (Dynamic Function) dont les valeurs retournées ne peuvent pas être connues à l'avance. Son utilisation dans un layout ou une page activera le rendu dynamique (dynamic rendering) 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ée en combinaison avec Suspense pour la récupération de données (Suspense for Data Fetching).

import { headers } from 'next/headers'

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

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

Historique des versions