メインコンテンツまでスキップ

headers

headers関数を使用すると、Server ComponentからHTTPの受信リクエストヘッダーを読み取ることができます。

headers()​

このAPIは、Web Headers APIを拡張しています。読み取り専用であるため、送信リクエストヘッダーを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>
}

Good to know:

  • headers()は**動的関数で、事前に返り値を知ることはできません。これをレイアウトまたはページで使用すると、ルートがリクエスト時に動的レンダリング**に切り替わります。

API リファレンス​

const headersList = headers()

Paramters​

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

Returns​

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

  • Headers.entries(): このオブジェクトに含まれるすべてのキー/バリューのペアを走査できる イテレータ を返します。
  • Headers.forEach(): この Headers オブジェクト内の各キー/バリューのペアに対して指定された関数を一度実行します。
  • Headers.get(): Headersオブジェクト内で指定された名前のヘッダーのすべての値の 文字列 を返します。
  • Headers.has(): Headersオブジェクトが特定のヘッダーを含んでいるかどうかを示すブール値を返します。
  • Headers.keys(): このオブジェクトに含まれるキー/バリューのペアのすべてのキーを走査できる イテレータ を返します。
  • Headers.values(): このオブジェクトに含まれるキー/バリューのペアのすべてのバリューを走査できる イテレータ を返します。

例​

データフェッチでの使用​

headers() は データフェッチ用のSuspenseと組み合わせて使用できます。

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.0headers の導入