headers
headers は、Server Component から 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')
}リファレンス
Parameters
headers はパラメータを取りません。
戻り値
headers は、読み取り専用の Web Headers オブジェクトを返します。
Headers.entries(): このオブジェクトに含まれるすべてのキー/値ペアをたどることができるiteratorを返します。Headers.forEach(): このHeadersオブジェクト内の各キー/値ペアに対して、指定された関数を一度実行します。Headers.get(): 指定された名前を持つヘッダーのすべての値のStringシーケンスを返します。Headers.has():Headersオブジェクトが特定のヘッダーを含んでいるかどうかを示すブール値を返します。Headers.keys(): このオブジェクトに含まれるキー/値ペアのすべてのキーをたどることができるiteratorを返します。Headers.values(): このオブジェクトに含まれるキー/値ペアのすべての値をたどることができるiteratorを返します。
Good to know
headersは非同期関数であり、Promise を返します。async/awaitまたは React のuse関数を使用する必要があります。- バージョン14以前では、
headersは同期関数でした。下位互換性のために、Next.js 15 では引き続き同期的にアクセスできますが、この動作は将来的に非推奨になる予定です。
- バージョン14以前では、
headersは読み取り専用であるため、送信リクエストヘッダーをsetまたはdeleteすることはできません。headersは、返される値が事前にわからない Dynamic 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-RC | headers は非同期関数になりました。codemod が利用可能です。 |
v13.0.0 | headers が導入されました。 |
役に立ちましたか?