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 主体的响应。

app/api/route.ts

TypeScript

import { NextResponse } from 'next/server'
 
export async function GET(request: 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)
// 将 ?from=/incoming-url 添加到 /login 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()

你还可以在生成响应时使用 NextResponse.next({ request: { headers } }) 将 headers 转发到上游：

import { NextResponse } from 'next/server'
 
// 给定一个传入请求...
const newHeaders = new Headers(request.headers)
// 添加一个新标头
newHeaders.set('x-version', '123')
// 将修改后的请求标头转发到上游
return NextResponse.next({
  request: {
    // 新请求标头
    headers: newHeaders,
  },
})

这会将 newHeaders 转发到上游的目标页面、路由或 server action，并且不会将它们暴露给客户端。虽然这种模式对于将数据传递到上游很有用，但应谨慎使用，因为包含这些数据的标头可能会被转发到外部服务。

相比之下，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)
  // 不要像这样转发标头
  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()
    // 只保留已知安全的标头，丢弃自定义 x-* 和其他敏感标头
    if (
      !headerName.startsWith('x-') &&
      headerName !== 'authorization' &&
      headerName !== 'cookie'
    ) {
      // 保留原始标头名称的大小写
      forwarded.set(name, value)
    }
  }
 
  return NextResponse.next({
    request: {
      headers: forwarded,
    },
  })
}