NextResponse 扩展了 Web Response API,并提供了额外的便捷方法。
cookies读取或修改响应的 Set-Cookie 头。
set(name, value)根据给定的名称,在响应上设置一个具有给定值的 cookie。
// Given incoming request /home
let response = NextResponse.next()
// Set a cookie to hide the banner
response.cookies.set('show-banner', 'false')
// Response will have a `Set-Cookie:show-banner=false;path=/home` header
return responseget(name)根据 cookie 名称,返回该 cookie 的值。如果未找到 cookie,则返回 undefined。如果找到多个 cookie,则返回第一个。
// Given incoming request /home
let response = NextResponse.next()
// { name: 'show-banner', value: 'false', Path: '/home' }
response.cookies.get('show-banner')getAll()根据 cookie 名称,返回该 cookie 的所有值。如果没有提供名称,则返回响应上的所有 cookie。
// Given incoming request /home
let response = NextResponse.next()
// [
// { name: 'experiments', value: 'new-pricing-page', Path: '/home' },
// { name: 'experiments', value: 'winter-launch', Path: '/home' },
// ]
response.cookies.getAll('experiments')
// Alternatively, get all cookies for the response
response.cookies.getAll()delete(name)根据 cookie 名称,从响应中删除该 cookie。
// Given incoming request /home
let response = NextResponse.next()
// Returns true for deleted, false if nothing is deleted
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'
// Given an incoming request...
const loginUrl = new URL('/login', request.url)
// Add ?from=/incoming-url to the /login URL
loginUrl.searchParams.set('from', request.nextUrl.pathname)
// And redirect to the new URL
return NextResponse.redirect(loginUrl)rewrite()生成一个重写(代理)给定 URL 的响应,同时保留原始 URL。
import { NextResponse } from 'next/server'
// Incoming request: /about, browser shows /about
// Rewritten request: /proxy, browser shows /about
return NextResponse.rewrite(new URL('/proxy', request.url))next()next() 方法对于代理很有用,因为它允许您提前返回并继续路由。
import { NextResponse } from 'next/server'
return NextResponse.next()在生成响应时,您还可以使用 NextResponse.next({ request: { headers } }) 将 headers 转发到上游:
import { NextResponse } from 'next/server'
// Given an incoming request...
const newHeaders = new Headers(request.headers)
// Add a new header
newHeaders.set('x-version', '123')
// Forward the modified request headers upstream
return NextResponse.next({
request: {
// New request headers
headers: newHeaders,
},
})这会将 newHeaders 转发到上游的目标页面、路由或服务器动作,并且不会将它们暴露给客户端。虽然这种模式对于向上游传递数据很有用,但应谨慎使用,因为包含这些数据的头可能会被转发到外部服务。
相比之下,NextResponse.next({ headers }) 是将头从代理发送到客户端的简写形式。这不是一个好的做法,应避免使用。其中一个原因是,设置像 Content-Type 这样的响应头可能会覆盖框架的预期(例如,Server Actions 使用的 Content-Type),导致提交失败或流式响应中断。
import { type NextRequest, NextResponse } from 'next/server'
async function proxy(request: NextRequest) {
const headers = await injectAuth(request.headers)
// DO NOT forward headers like this
return NextResponse.next({ headers })
}通常,应避免复制所有传入的请求头,因为这样做可能会将敏感数据泄露给客户端或上游服务。
优先采用防御性方法,使用允许列表创建传入请求头的子集。例如,您可能会丢弃自定义的 x-* 头,只转发已知安全的头:
import { type NextRequest, NextResponse } from 'next/server'
function proxy(request: NextRequest) {
const incoming = new Headers(request.headers)
const forwarded = new Headers()
for (const [name, value] of incoming) {
const headerName = name.toLowerCase()
// Keep only known-safe headers, discard custom x-* and other sensitive ones
if (
!headerName.startsWith('x-') &&
headerName !== 'authorization' &&
headerName !== 'cookie'
) {
// Preserve original header name casing
forwarded.set(name, value)
}
}
return NextResponse.next({
request: {
headers: forwarded,
},
})
}