headers

Die headers-Funktion ermöglicht das Lesen der eingehenden HTTP-Request-Header in einer Server-Komponente (Server Component).

headers()

Diese API erweitert die Web Headers API. Sie ist schreibgeschützt, was bedeutet, dass Sie die ausgehenden Request-Header nicht setzen oder löschen können.

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

Wissenswert:

• headers() ist eine dynamische Funktion (Dynamic Function), deren Rückgabewerte nicht im Voraus bekannt sind. Die Verwendung in einem Layout oder einer Seite führt zu dynamischem Rendering (dynamic rendering) zur Laufzeit.

API-Referenz

const headersList = headers()

Parameter

headers akzeptiert keine Parameter.

Rückgabewert

headers gibt ein schreibgeschütztes Web Headers-Objekt zurück.

• Headers.entries(): Gibt einen Iterator zurück, der alle Schlüssel/Wert-Paare in diesem Objekt durchläuft.
• Headers.forEach(): Führt eine bereitgestellte Funktion einmal für jedes Schlüssel/Wert-Paar in diesem Headers-Objekt aus.
• Headers.get(): Gibt eine String-Sequenz aller Werte eines Headers mit einem bestimmten Namen zurück.
• Headers.has(): Gibt einen Boolean zurück, der angibt, ob ein Headers-Objekt einen bestimmten Header enthält.
• Headers.keys(): Gibt einen Iterator zurück, der alle Schlüssel der Schlüssel/Wert-Paare in diesem Objekt durchläuft.
• Headers.values(): Gibt einen Iterator zurück, der alle Werte der Schlüssel/Wert-Paare in diesem Objekt durchläuft.

Beispiele

Verwendung mit Data Fetching

headers() kann in Kombination mit Suspense für Data Fetching verwendet werden.

import { headers } from 'next/headers'

async function getUser() {
  const headersInstance = headers()
  const authorization = headersInstance.get('authorization')
  // Authorization-Header weiterleiten
  const res = await fetch('...', {
    headers: { authorization },
  })
  return res.json()
}

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

Versionsverlauf