NextResponse

NextResponse 擴展了 Web Response API，並提供了額外的便利方法。

`cookies`

讀取或修改回應中的 Set-Cookie 標頭。

`set(name, value)`

根據給定的名稱，在回應中設定一個具有對應值的 cookie。

// 假設傳入的請求是 /home
let response = NextResponse.next()
// 設定一個 cookie 來隱藏橫幅
response.cookies.set('show-banner', 'false')
// 回應將包含 `Set-Cookie:show-banner=false;path=/home` 標頭
return response

`get(name)`

根據 cookie 名稱，回傳該 cookie 的值。如果找不到 cookie，則回傳 undefined。如果找到多個 cookie，則回傳第一個。

// 假設傳入的請求是 /home
let response = NextResponse.next()
// { name: 'show-banner', value: 'false', Path: '/home' }
response.cookies.get('show-banner')

`getAll()`

根據 cookie 名稱，回傳該 cookie 的所有值。如果未提供名稱，則回傳回應中的所有 cookie。

// 假設傳入的請求是 /home
let response = NextResponse.next()
// [
//   { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
//   { name: 'experiments', value: 'winter-launch', Path: '/home' },
// ]
response.cookies.getAll('experiments')
// 或者，取得回應中的所有 cookie
response.cookies.getAll()

`delete(name)`

根據 cookie 名稱，從回應中刪除該 cookie。

// 假設傳入的請求是 /home
let response = NextResponse.next()
// 回傳 true 表示已刪除，false 表示未刪除任何內容
response.cookies.delete('experiments')

`json()`

產生一個包含給定 JSON 主體的回應。

import { NextResponse } from 'next/server'

export async function GET(request: Request) {
  return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
}

import { NextResponse } from 'next/server'

export async function GET(request) {
  return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 })
}

`redirect()`

產生一個重新導向至指定 URL 的回應。

import { NextResponse } from 'next/server'

return NextResponse.redirect(new URL('/new', request.url))

URL 可以在用於 NextResponse.redirect() 方法之前被建立和修改。例如，您可以使用 request.nextUrl 屬性來取得當前 URL，然後修改它以重新導向至不同的 URL。

import { NextResponse } from 'next/server'

// 假設有一個傳入的請求...
const loginUrl = new URL('/login', request.url)
// 在 /login URL 上新增 ?from=/incoming-url
loginUrl.searchParams.set('from', request.nextUrl.pathname)
// 然後重新導向至新的 URL
return NextResponse.redirect(loginUrl)

`rewrite()`

產生一個重寫 (代理) 給定 URL 的回應，同時保留原始 URL。

import { NextResponse } from 'next/server'

// 傳入的請求: /about, 瀏覽器顯示 /about
// 重寫後的請求: /proxy, 瀏覽器顯示 /about
return NextResponse.rewrite(new URL('/proxy', request.url))

`next()`

next() 方法在中間件中非常有用，因為它允許您提前回傳並繼續路由。

import { NextResponse } from 'next/server'

return NextResponse.next()

您也可以在產生回應時轉發 headers：

import { NextResponse } from 'next/server'

// 假設有一個傳入的請求...
const newHeaders = new Headers(request.headers)
// 新增一個標頭
newHeaders.set('x-version', '123')
// 並產生一個包含新標頭的回應
return NextResponse.next({
  request: {
    // 新的請求標頭
    headers: newHeaders,
  },
})

On this page