コンテンツにスキップ

headers

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

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(): このオブジェクトに含まれるすべてのキー/値ペアを順に処理するための iterator を返します。
  • Headers.forEach(): この Headers オブジェクト内の各キー/値ペアに対して、提供された関数を一度実行します。
  • Headers.get(): 指定された名前を持つ `Headers` オブジェクト内のすべてのヘッダー値の `String` シーケンスを返します。
  • Headers.has(): `Headers` オブジェクトに特定のヘッダーが含まれているかどうかを示すブール値を返します。
  • Headers.keys(): このオブジェクトに含まれるキーと値のペアのすべてのキーを順に処理できるiteratorを返します。
  • Headers.values(): このオブジェクトに含まれるキーと値のペアのすべての値を順に処理できるiteratorを返します。

知っておくと良いこと

  • headers はPromiseを返す**非同期**関数です。 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 }, // Forward the authorization header
  })
  const user = await res.json()
 
  return <h1>{user.name}</h1>
}

バージョン履歴

バージョン変更点
v15.0.0-RCheaders が非同期関数になりました。 コードモッドが利用可能です。
v13.0.0headers が導入されました。