如何在 nextjs14 中设置 cookie

在Next.js 14中设置cookie通常涉及服务端（例如在API路由中）和客户端两种情况。以下是在这两种情况下设置cookie的方法：

1. 在服务端设置Cookie（例如在API路由中）

在服务端设置cookie通常用于处理诸如身份验证后设置session cookie等场景。你可以使用Node.js的http模块或者使用第三方库如cookie和js-cookie来帮助设置。这里以cookie库为例，展示在API路由中如何设置cookie：

首先，你需要安装cookie库：

bash
npm install cookie

然后，你可以在Next.js的API路由中设置cookie，如下所示：

javascript
// pages/api/set-cookie.js
import { serialize } from 'cookie';

export default function handler(req, res) {
  const cookie = serialize('myCookie', 'cookieValue', {
    httpOnly: true,
    secure: process.env.NODE_ENV !== 'development',
    maxAge: 60 * 60 * 24 * 7, // 1 week
    path: '/',
  });

  res.setHeader('Set-Cookie', cookie);
  res.status(200).json({ message: 'Cookie has been set' });
}

2. 在客户端设置Cookie

在客户端设置cookie通常用于在用户的浏览器上存储非敏感信息。你可以使用js-cookie库来简化在客户端的cookie操作。首先，需要安装js-cookie：

bash
npm install js-cookie

然后，在客户端代码中设置cookie，如下所示：

javascript
import Cookies from 'js-cookie';

function setClientCookie() {
  Cookies.set('clientCookie', 'clientValue', { expires: 7, path: '' });
}

这个函数可以在任何客户端事件或React组件中调用，例如在用户点击按钮时设置cookie。

总结

使用Next.js时，根据你的具体需求（是否涉及敏感信息、是否需要服务端渲染等），你可以选择在服务端或客户端设置cookie。务必注意安全设置，如使用httpOnly和secure选项，以增强应用的安全性。