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

headers

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

app/page.tsx
import { headers } from 'next/headers'

export default async function Page() {
  const headersList = await headers()
  const userAgent = headersList.get('user-agent')
}

リファレンス​

パラメーター​

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

戻り値​

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

  • Headers.entries(): このオブジェクト内に含まれるすべてのキー/値ペアを取得するための イテレーター を返します
  • Headers.forEach(): この Headers オブジェクト内の各キー/値ペアに対して提供された関数を一度実行します
  • Headers.get(): 指定された名前の Headers オブジェクト内のヘッダーのすべての値の 文字列 シーケンスを返します
  • Headers.has(): Headers オブジェクトに特定のヘッダーが含まれているかどうかを示すブール値を返します
  • Headers.keys(): このオブジェクト内に含まれるすべてのキー/値ペアのキーを取得するための イテレーター を返します
  • Headers.values(): このオブジェクト内に含まれるすべてのキー/値ペアの値を取得するための イテレーター を返します

Good to know​

  • headers はプロミスを返す 非同期 関数です。async/await もしくは React の use 関数を使う必要があります。
    • バージョン 14 以前では、headers は同期関数でした。下位互換性を考慮して、Next.js 15 でも同期的にアクセスできますが、この動作は将来的に非推奨となります。
  • headers は読み取り専用のため、送信リクエストヘッダーを set または delete することはできません。
  • headers は返される値が事前にわからない 動的 API です。使用することでルートが 動的レンダリング に切り替わります。

例​

Authorization ヘッダーの使用​

app/page.js
import { headers } from 'next/headers'

export default async function Page() {
  const authorization = (await headers()).get('authorization')
  const res = await fetch('...', {
    headers: { authorization }, // Authorization ヘッダーを転送する
  })
  const user = await res.json()

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

バージョン履歴​

Version変更点
v15.0.0-RCheaders は非同期関数となりました。codemod が利用可能です。
v13.0.0headers が導入されました。