如何在Next.js的Middleware中在服务端保存Cookie并用于服务端组件

核心逻辑 #

要在服务端保存Cookie，你得通过NextResponse对象来设置响应Cookie（request.cookies是只读的，只能用来读取请求里的Cookie），后续服务端组件可以直接读取这些存在请求头里的Cookie。

1. 在Middleware中设置Cookie #

修改你的Middleware代码，通过NextResponse创建响应并添加Cookie：

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // 读取请求中的现有Cookie（示例）
  const existingCookie = request.cookies.get('nextjs')
  
  // 创建响应对象，可选择直接传递原请求或重定向到指定路径
  const response = NextResponse.next()
  // 若需重定向：const response = NextResponse.redirect(new URL('/dashboard', request.url))

  // 设置新Cookie，可配置多项属性
  response.cookies.set({
    name: 'server-side-cookie',
    value: 'generated-server-value',
    path: '/', // 让整个应用都能访问该Cookie
    maxAge: 60 * 60 * 24, // 过期时间：1天（单位为秒）
    httpOnly: true, // 禁止前端JS读取，提升安全性
    secure: process.env.NODE_ENV === 'production', // 生产环境仅通过HTTPS传输
    sameSite: 'strict' // 防范CSRF攻击
  })

  // 也可以修改现有Cookie的值
  if (existingCookie) {
    response.cookies.set('nextjs', 'updated-fast-value', { path: '/' })
  }

  return response
}

2. 在服务端组件中读取Cookie #

在服务端组件（Server Component）里，直接从next/headers导入cookies函数就能读取刚才设置的Cookie：

import { cookies } from 'next/headers'

export default function ServerComponent() {
  const cookieStore = cookies()
  const serverCookie = cookieStore.get('server-side-cookie')

  return (
    <div>
      <p>服务端Cookie值：{serverCookie?.value}</p>
    </div>
  )
}

重要注意点 #

• request.cookies是只读对象，只能读取请求携带的Cookie，不能直接修改它来设置Cookie，必须通过NextResponse的cookies方法操作。
• 设置Cookie时，建议根据业务需求配置httpOnly、secure、sameSite等安全属性，避免安全风险。
• 服务端组件中读取Cookie是同步操作，不需要异步请求，因为服务端组件运行在服务器端，可直接访问请求头信息。

内容的提问来源于stack exchange，提问作者user22749699