NextJS（Pages Router）使用cookies-next设置的Cookie刷新后短暂显示即消失

问题场景 #

在Next.js Pages Router客户端使用cookies-next设置Cookie，路由跳转时Cookie正常生效，但手动刷新页面或重新打开标签页后，Cookie短暂显示后立即消失。

核心原因及解决方案 #

1. 完善Cookie配置项

默认的Cookie配置可能缺少关键参数，导致无法在全站持久化存储。补充以下配置：

const cookieOptions = {
  expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 399), // 399天（Chrome最大Cookie有效期为400天）
  path: "/", // 确保Cookie在整个站点路径下生效
  secure: process.env.NODE_ENV === "production", // 生产环境启用HTTPS下的secure属性，本地开发可关闭
  sameSite: "lax", // 适配多数场景，避免跨域Cookie限制
};

setCookie("segmentation", segmentation, cookieOptions);

• path: "/"：保证Cookie在所有路由下都能被读取，避免仅在当前设置路由生效
• secure：生产环境下必须开启，否则HTTPS站点的Cookie可能无法持久化
• sameSite：防止浏览器因跨域策略自动清除Cookie

2. 排查服务端逻辑干扰

如果页面使用SSR（getServerSideProps/getInitialProps），需检查服务端代码是否存在修改或删除segmentation Cookie的逻辑：

• 避免在服务端设置同名Cookie并覆盖客户端的值
• 检查是否有服务端代码误将Cookie的expires设置为过去时间，导致刷新时被清除

3. 验证Cookie值合法性

确保segmentation的值不含特殊字符（如空格、逗号、分号等），这类字符可能导致Cookie存储失败。可先测试固定值：

setCookie("segmentation", "test-valid-value", cookieOptions);

若固定值能正常持久化，再排查segmentation变量的内容问题。

4. 利用浏览器工具排查

打开浏览器开发者工具的Application标签：

• 查看Cookie的expires、path、secure等属性是否符合配置
• 刷新页面时观察Network标签，检查服务端返回的Set-Cookie头是否覆盖了客户端设置的Cookie

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