无法使用 NextJS 9 的 API 路由设置 cookie

Question

通常，在使用 Express 时，“res”对象中似乎有“cookie”，因此您可以执行以下操作：

res.cookie('session', sessionCookie, options);

NextJS 在 Next 9 提供的 API 路由中，查看 res 的时候，是不存在的。有没有办法在 Next API Route 函数中为响应对象设置 cookie？

Answer 1

改编自官方 repo 中间件示例，您可以Set-Cookie通过res如下方式设置标头：

import { serialize } from 'cookie';

function (req, res) {
   // ...
   // setHeader(headerName: string, cookies: string | string[])
   // can use array for multiple cookies
   res.setHeader('Set-Cookie', serialize('token', 'token_cookie_value', { path: '/' }));
}

Answer 2

我刚刚在 Next.js 中找到了一种更简单的方法来做到这一点，尽管使用了一个库——cookie -next

跑步 npm install --save cookies-next

如果您使用的 next.js 版本高于 12.2.0，则需要使用 cookies-next 2.1.0 或更高版本

客户端示例

import { getCookies, setCookie, deleteCookie } from 'cookies-next';

// we can use it anywhere

getCookies();
getCookie('key');
setCookie('key', 'value');
deleteCookie('key');

服务器示例

getServerSideProps或pages/api

import { getCookies, getCookie, setCookie, deleteCookie } from 'cookies-next';

export default async function handler(req, res) {
  setCookie('server-key', 'value', { req, res, maxAge: 60 * 60 * 24 });
  getCookie('key', { req, res });
  getCookies({ req, res });
  deleteCookie('key', { req, res });

注意客户端和服务器的区别。对于服务器端，您必须将 { req, res } 传递给 next-cookie，否则它将不起作用