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

headers

headersは、Server ComponentからHTTPの受信リクエストヘッダーを読み取るための非同期関数です。

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は非同期関数であり、Promiseを返します。async/awaitまたはReactのuse関数を使用する必要があります。
    • バージョン14以前では、headersは同期関数でした。後方互換性を助けるために、Next.js 15では同期的にアクセスすることも可能ですが、この動作は将来的に廃止される予定です。
  • headersは読み取り専用であるため、送信リクエストヘッダーをsetまたはdeleteすることはできません。
  • headersは、事前に返される値を知ることができないDynamic APIです。これを使用すると、ルートは**dynamic rendering**にオプトインします。

例​

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

バージョン履歴​

バージョン変更内容
v15.0.0-RCheadersは現在非同期関数です。codemodが利用可能です。
v13.0.0headersが導入されました。