headers (標頭)
標頭允許您在指定路徑的傳入請求的回應上設定自訂 HTTP 標頭。
要設定自訂 HTTP 標頭，您可以在 `next.config.js` 中使用 `headers` 鍵。
next.config.js
module.exports = {
async headers() {
return [
{
source: '/about',
headers: [
{
key: 'x-custom-header',
value: 'my custom header value',
},
{
key: 'x-another-custom-header',
value: 'my other custom header value',
},
],
},
]
},
}`headers` 是一個非同步函式，它預期返回一個陣列，其中包含具有 `source` 和 `headers` 屬性的物件。
- `source` 是傳入請求的路徑模式。
headers是一個回應標頭物件陣列，具有key和value屬性。basePath：false或undefined- 若為 false，則 basePath 不會被包含在比對中，僅能用於外部重寫。locale：false或undefined- 語系是否不應包含在比對中。has是一個 has 物件 陣列，具有type、key和value屬性。missing是一個 missing 物件 陣列，具有type、key和value屬性。
標頭會在檔案系統（包含頁面和 /public 檔案）之前檢查。
標頭覆寫行為
如果兩個標頭符合相同路徑並設定相同的標頭鍵，則最後一個標頭鍵將會覆寫第一個。使用以下標頭，路徑 /hello 將導致標頭 x-hello 為 world，因為最後設定的標頭值為 world。
next.config.js
module.exports = {
async headers() {
return [
{
source: '/:path*',
headers: [
{
key: 'x-hello',
value: 'there',
},
],
},
{
source: '/hello',
headers: [
{
key: 'x-hello',
value: 'world',
},
],
},
]
},
}路徑比對
允許路徑比對，例如 /blog/:slug 將會符合 /blog/hello-world（不支援巢狀路徑）
next.config.js
module.exports = {
async headers() {
return [
{
source: '/blog/:slug',
headers: [
{
key: 'x-slug',
value: ':slug', // Matched parameters can be used in the value
},
{
key: 'x-slug-:slug', // Matched parameters can be used in the key
value: 'my other custom header value',
},
],
},
]
},
}