Next.js中getServerSideProps无法设置Cookie问题求助

核心原因 #

getServerSideProps是服务端渲染生命周期函数，设置Cookie必须通过**修改响应头（Set-Cookie）**实现，未正确传入服务端上下文（req/res）或误用客户端Cookie操作逻辑，都会导致设置失效。

解决方案1：原生通过res.setHeader设置 #

这是最可靠的原生方式，手动构造标准格式的Set-Cookie响应头：

export async function getServerSideProps({ req, res }) {
  // 读取现有Cookie
  console.log("当前Cookie:", req.headers.cookie);

  // 设置Cookie，按HTTP标准格式构造
  res.setHeader("Set-Cookie", [
    "myCookieName=updated-value; HttpOnly; Path=/; Max-Age=86400; SameSite=Lax",
    // 多Cookie可继续添加数组元素
  ]);

  return {
    props: {},
  };
}

关键参数说明： #

• HttpOnly: 禁止前端JS读取，和你中间件的设置保持一致，提升安全性
• Path=/: 确保全站所有路径都能访问该Cookie
• Max-Age=86400: 设置Cookie有效期为1天（单位：秒），不设置则为会话Cookie（关闭浏览器即失效）
• SameSite=Lax: 适配现代浏览器隐私策略，避免跨站请求被拦截

解决方案2：正确使用cookies-next库 #

若使用第三方库，必须传入服务端的req和res对象，否则库无法定位服务端响应上下文：

import { setCookie } from "cookies-next";

export async function getServerSideProps({ req, res }) {
  console.log("当前Cookie:", req.headers.cookie);

  setCookie("myCookieName", "library-set-value", {
    req,
    res,
    httpOnly: true,
    path: "/",
    maxAge: 86400,
    sameSite: "lax",
  });

  return {
    props: {},
  };
}

与中间件的配合注意事项 #

你的中间件已设置同名Cookie，getServerSideProps中的设置会覆盖中间件的Cookie值（响应头的Set-Cookie按最后设置的生效）。若需保留中间件的Cookie，避免在getServerSideProps中修改同名Cookie，或调整两者的执行逻辑优先级。

排查Cookie不持久化的常见坑 #

• 未设置Max-Age/Expires: 会话Cookie仅在浏览器打开期间有效，关闭即消失
• Path设置过窄: 比如设为/api，则仅/api路径下能读取，全局Cookie必须设为/
• 域名不一致: 本地开发时不要混用localhost和127.0.0.1，两者属于不同域名，Cookie不共享
• 浏览器隐私模式: 无痕模式下Cookie不会持久化存储，测试请用正常模式

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