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

【问题标题】：Is it possible to set a server-side cookie in Next.js是否可以在 Next.js 中设置服务器端 cookie
【发布时间】：2022-08-08 02:11:35
【问题描述】：

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

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

标签： reactjs cookies next.js

【解决方案1】：

利用饼干-下一个通过命令npm i 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

【讨论】：

【解决方案2】：

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

这是NextJs serverless API endpoint 的示例用法：

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 回调或在服务器上运行的其他地方。

【讨论】：