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

須知事項:

headers() 是一個**動態函式 (Dynamic Function)，其返回值無法預先得知。在佈局或頁面中使用它會使路由在請求時選擇動態渲染 (dynamic rendering)**。

API 參考

const headersList = headers()

參數

headers 不接受任何參數。

返回值

headers 返回一個唯讀的 Web Headers 物件。

Headers.entries(): 返回一個 iterator，允許遍歷此物件中所有的鍵/值對。
Headers.forEach(): 對此 Headers 物件中的每個鍵/值對執行一次提供的函式。
Headers.get(): 返回一個 String 序列，包含 Headers 物件中指定名稱標頭的所有值。
Headers.has(): 返回一個布林值，表示 Headers 物件是否包含某個標頭。
Headers.keys(): 返回一個 iterator，允許遍歷此物件中所有鍵/值對的鍵。
Headers.values(): 返回一個 iterator，允許遍歷此物件中所有鍵/值對的值。

範例

與資料獲取一起使用

headers() 可以與資料獲取的 Suspense (Suspense for Data Fetching) 一起使用。

app/page.js

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

版本歷史

版本	變更
`v13.0.0`	引入 `headers`。

headers()

API 參考

參數

返回值

範例

與資料獲取一起使用

版本歷史

On this page

`headers()`