如何解决NextJS中getServerSideProps用universal-cookie设置Cookie失效问题

核心问题 #

在服务端的getServerSideProps中，直接使用universal-cookie的set方法只会在内存中的Cookie对象里修改值，不会自动将新Cookie写入HTTP响应头，浏览器自然接收不到这个新设置的Cookie。而读取功能正常是因为初始化时已经从req.headers.cookie加载了已有的Cookie数据。另外你代码里的函数名写错了，应该是getServerSideProps而非getGetServerSideProps。

修正方案 #

要在服务端设置Cookie，必须通过NextPageContext中的res对象，手动添加Set-Cookie响应头。结合universal-cookie的话，可以用它来生成符合规范的Cookie字符串，再通过响应头发送：

import { NextPageContext } from 'next';
import Cookies from 'universal-cookie';

export const getServerSideProps = // 修正函数名
async ({ req, res, query }: NextPageContext) => {
  // 初始化Cookie实例，用于读取现有Cookie
  const cookies = new Cookies(req?.headers?.cookie);

  // 1. 构造要设置的Cookie参数
  const newCookie = cookies.getSetCookie('test-cookie', 'true', {
    httpOnly: true,
    path: '/', // 建议显式设置路径，默认是当前路径
    // 可添加其他参数：maxAge、domain、secure等
  });

  // 2. 将Cookie添加到响应头
  res.setHeader('Set-Cookie', newCookie);

  // 读取现有Cookie的逻辑保持不变
  return {
    props: {
      isRegisterd: !!cookies.get('veriation'),
    },
  };
};

补充说明 #

• 如果需要设置多个Cookie，res.setHeader的第二个参数可以传数组：res.setHeader('Set-Cookie', [cookie1, cookie2])
• universal-cookie的getSetCookie方法会帮你生成符合HTTP规范的Cookie字符串，不用手动拼接
• 务必确保res对象存在（服务端环境下一定存在），可以不用加可选链
• 注意Cookie的属性设置：比如secure属性需要在HTTPS环境下才会生效，domain要对应你的域名

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