︙

headers

次の headers 関数を使用すると、Server Componentからの HTTP の受信 request ヘッダを読み取ることができます。

`headers()`

この API はWeb Headers API を拡張します。これは読み取り専用であり、つまり、送信する request headers を set / deleteすることはできません。

app/page.tsx

import { headers } from 'next/headers'

export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')

  return <div>Referer: {referer}</div>
}

app/page.js

import { headers } from 'next/headers'

export default function Page() {
  const headersList = headers()
  const referer = headersList.get('referer')

  return <div>Referer: {referer}</div>
}

Good to know:

headers()は**Dynamic Functionであり、返される値は事前には知ることができません。これを layout またはページで使用すると、route は request 時にdynamic rendering**を選択します。

API Reference

const headersList = headers();

Parameters

headersはパラメータを受け取りません。

Returns

headersは読み取り就職専用のWeb Headers object を返します。

Headers.entries() : これに含まれるすべてのキー/値のペアを順番に処理可能なiterator を返します。object
Headers.forEach() : この Headers object 内の各 key/value ペアに対して、指定された関数を一度実行します。
Headers.get() : 与えられた名前を持つ Headers object 内の header のすべての値のString シーケンスを返します。
Headers.has() : Headers object が特定の header を含んでいるかどうかを示す boolean を返します。
Headers.keys() ：この object に含まれるキー/値のペアのすべてのキーを通過するためのiterator を返します。
Headers.values() ：この object に含まれるキー/値のペアのすべての値を通過することができるiterator を返します。

Examples

データフェッチングとの使用法

headers()はSuspense for Data Fetchingと組み合わせて使用することができます。

app/page.js

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

async function User() {
  const authorization = headers().get('authorization')
  const res = await fetch('...', {
    headers: { authorization }, // Forward the authorization header
  })
  const user = await res.json()

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

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

IP アドレス

headers()は、client の IP アドレスを取得するために使用できます。

app/page.js

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

x-forwarded-forに加えて、headers()も読み取ることができます：

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

Version History

Version	Changes
`v13.0.0`	`headers` 導入されました。