headers

Die headers-Funktion ermöglicht das Lesen der eingehenden HTTP-Anfrage-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 Anfrage-Header nicht set / delete 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 der Anfrage.

API-Referenz

const headersList = headers()

Parameter

headers nimmt keine Parameter entgegen.

Rückgabewerte

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 innerhalb eines Headers-Objekts 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 { Suspense } from 'react'
import { headers } from 'next/headers'

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

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

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

IP-Adresse

headers() kann verwendet werden, um die IP-Adresse des Clients zu erhalten.

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

Zusätzlich zu x-forwarded-for kann headers() auch lesen:

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

Versionsverlauf