headers

headers関数を使用すると、サーバーコンポーネントからHTTP受信リクエストヘッダーを読み取ることができます。

`headers()`

このAPIはWeb Headers APIを拡張しています。読み取り専用であり、送信リクエストヘッダーをset/deleteすることはできません。

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

知っておくと便利:

headers()は**ダイナミック関数であり、返される値を事前に知ることはできません。レイアウトやページで使用すると、ルートはリクエスト時に動的レンダリング**が有効になります。

APIリファレンス

const headersList = headers()

パラメータ

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

戻り値

headersは読み取り専用のWeb Headersオブジェクトを返します。

Headers.entries(): このオブジェクトに含まれるすべてのキー/値ペアを通過するためのiteratorを返します。
Headers.forEach(): このHeadersオブジェクト内の各キー/値ペアに対して、提供された関数を1回実行します。
Headers.get(): 指定された名前のヘッダー値のStringシーケンスを返します。
Headers.has(): Headersオブジェクトが特定のヘッダーを含むかどうかを示すブール値を返します。
Headers.keys(): このオブジェクトに含まれるキー/値ペアのすべてのキーを通過するためのiteratorを返します。
Headers.values(): このオブジェクトに含まれるキー/値ペアのすべての値を通過するためのiteratorを返します。

使用例

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

headers()はサスペンスを使ったデータフェッチングと組み合わせて使用できます。

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 }, // 認証ヘッダーを転送
  })
  const user = await res.json()

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

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

IPアドレスの取得

headers()を使用してクライアントの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

バージョン履歴

バージョン	変更内容
`v13.0.0`	`headers`が導入されました。

On this page