是否可以在 Next.js 中设置服务器端 cookie

Question

在我的 Next.js 应用程序中，我需要从 URL 获取一些参数并使用它们来设置服务器端 cookie。

但我什至不确定是否可以通过这种方式设置服务器端 cookie。这有可能吗？如果是，任何提示或建议将非常感激。

Answer 1

通过命令npm i cookies -next使用cookies-next

服务器端示例

import React from 'react'
import { getCookies, getCookie, setCookies, removeCookies } from 'cookies-next';

const Home = () => {
  return (
    <div>page content</div>
  )
}

export const getServerSideProps = ({ req, res }) => {
    setCookies('test', 'value', { req, res, maxAge: 60 * 6 * 24 });
    getCookie('test', { req, res});
    getCookies({ req, res});
    removeCookies('test', { req, res});
  return { props: {}};
}

export default Home

客户端示例

import { getCookies, setCookies, removeCookies } from 'cookies-next';
// we can use it anywhere
getCookies();
getCookie('key');
setCookies('key', 'value');
removeCookies('key');

有关更多信息，请参阅https://www.npmjs.com/package/cookies-next

Answer 2

Next 应用程序不像通常的服务器应用程序那样工作。不过，您可以像使用 DBaaS 一样创建自定义流程。或者，如果您只想限制客户端访问该 cookie，我认为可以将它们保留为httponly标记 （您应该是决定这一点的人）。这样，你只能在服务器上读取该cookie。

以下是NextJs 无服务器 API 端点的用法示例：

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>
) {
  const { yourParameter } = req.query;
  res.setHeader("set-cookie", `yourParameter=${yourParameter}; path=/; samesite=lax; httponly;`)
  res.redirect('/');
}

您可以将相同的逻辑应用于getServerSideProps回调或在服务器上运行的其他位置。