headers

headers関数を使用すると、サーバーコンポーネント (Server Component)から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()は**ダイナミック関数 (Dynamic Function)であり、返される値を事前に知ることはできません。レイアウトやページで使用すると、ルートはリクエスト時にダイナミックレンダリング (dynamic rendering)**が有効になります。

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()はサスペンスを伴うデータフェッチング (Suspense for Data Fetching)と組み合わせて使用できます。

import { headers } from 'next/headers'

async function getUser() {
  const headersInstance = headers()
  const authorization = headersInstance.get('authorization')
  // 認証ヘッダーを転送
  const res = await fetch('...', {
    headers: { authorization },
  })
  return res.json()
}

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

バージョン履歴