Next.js中服务端与客户端的Cookie共享方案问询

核心方案：统一 Cookie 域名与路径 #

• 让 Next.js 应用和 NestJS 服务器共用同一根域名（比如 app.yourdomain.com 和 api.yourdomain.com），登录成功后，NestJS 设置 Cookie 时指定 domain 为根域名（.yourdomain.com）、path 为 /。这样 Cookie 会自动被两个服务共享——浏览器端请求 NestJS 时会携带 Cookie，Next.js 在服务端执行 getServerSideProps 时，也能从请求头拿到该 Cookie。
• 配置细节：生产环境务必开启 secure 属性（仅 HTTPS 下传递），认证令牌优先设置 httpOnly: true 防止 XSS 攻击，无需前端读取令牌的话不要关闭该属性。

getServerSideProps 中如何携带 Cookie 认证 #

Next.js 不会自动把浏览器的 Cookie 传给 getServerSideProps 里的请求，需要手动从 context.req.headers.cookie 取出，再附加到请求 NestJS 的头里：

export async function getServerSideProps(context) {
  // 从请求头获取浏览器传来的 Cookie
  const cookieHeader = context.req.headers.cookie;
  
  const apiResponse = await fetch('https://api.yourdomain.com/protected-data', {
    headers: {
      // 把 Cookie 传给 NestJS 做认证
      ...(cookieHeader && { cookie: cookieHeader })
    }
  });

  const data = await apiResponse.json();
  return { props: { data } };
}

不需要单独的 /api/login 同步接口 #

完全没必要额外做一个 Next.js API 路由来同步 Cookie。直接让前端调用 NestJS 的 /login 接口，登录成功后 NestJS 会把配置好的 Cookie 种到浏览器里，这个 Cookie 会自动被 Next.js 识别，后续 getServerSideProps 请求自然能拿到它。

如果遇到跨域问题，在 NestJS 里配置 CORS 时要开启 credentials: true，并指定允许的 Origin 为你的 Next.js 域名。

其他可选方案 #

1. 用 Next.js Middleware 统一处理 Cookie #

可以写一个全局 Middleware，自动处理 Cookie 的传递逻辑，不用在每个 getServerSideProps 里重复写代码：

// middleware.js
import { NextResponse } from 'next/server';

export function middleware(request) {
  // 这里可以统一处理 Cookie 验证，或者在转发请求时自动携带 Cookie
  return NextResponse.next();
}

2. 服务端预取用户状态到 Context #

如果前端组件需要用到用户信息，可以在 getServerSideProps 里通过 NestJS 接口获取用户数据，再通过 props 传给页面组件，最后存入 React Context，避免客户端重复请求。

总结 #

最简洁优雅的方式就是通过统一 Cookie 的域名和路径实现共享，不需要额外的同步接口。重点是 NestJS 设置 Cookie 时的配置要正确，再配合 getServerSideProps 手动传递 Cookie 头，就能同时满足客户端和服务端的认证需求。

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