随着前端技术的不断发展，越来越多的应用需要涉及 Cookies。Cookies 是一组存储在用户计算机上的数据，可以用来存储用户的偏好设置、登录状态等信息。在 Next.js 中，我们可以使用内置的 cookies 模块来方便地处理 Cookies。
创建后端 API 端点
在 Next.js 中，我们可以使用 API 路由来创建后端端点。API 路由是 Next.js 内置的一种路由，这些路由不会被 Next.js 渲染，而是被用于处理 API 请求。我们可以在 /pages/api 目录下创建一个新的文件来创建 API 端点。
我们可以创建一个名为 set-cookie.js 的文件来处理设置 Cookies 请求：
export default (req, res) => {
res.setHeader('Set-Cookie', 'name=value; Path=/')
res.statusCode = 200
res.end()
}该文件导出了一个默认的异步函数。这个函数会接收两个参数 req 和 res，分别代表请求和响应。我们首先调用 res.setHeader() 方法来设置 HTTP 头部，用来设置 Cookie 的值。我们可以使用 Set-Cookie 头部来设置 Cookie 的值。当然，我们也可以在头部中设置更多的选项，比如 expires、max-age 等等。在这个例子中，我们只设置了 Path 选项，它表示这个 Cookie 只适用于当前路径。然后，我们调用 res.statusCode 来设置响应状态码，200 表示一切正常。最后，我们调用 res.end() 方法来结束响应。
从 Cookies 中获取信息
我们可以使用 cookies 模块来从 Cookies 中获取信息。该模块是 Next.js 内置的，不需要额外安装。我们可以在 API 端点中通过 req.cookies 对象来获取 Cookie 的值。
我们可以创建一个名为 get-cookie.js 的文件来处理获取 Cookies 请求：
-- -------------------- ---- -------
------ ------- ----- ---- -- -
----- ----- - ----------------
-- -------- -
-------------- - ---
---------
------
-
-------------- - ---
---------- ----- --
-该文件的逻辑很简单，我们首先通过 req.cookies 对象来获取 Cookie 的值。如果获取到的值是空的，我们设置状态码为 404，并结束响应。如果获取到的值不为空，我们将状态码设置为 200，并使用 res.json() 方法来返回一个 JSON 对象，其中包含 Cookie 的值。
管理 Cookies
在一些情况下，我们可能需要删除某个 Cookie，或者在 Cookie 中添加更多的信息。我们可以通过设置 Cookie 的 max-age 为 0 来删除 Cookie，或者通过设置新的 Cookie 值来添加更多的信息。
我们可以创建一个名为 manage-cookie.js 的文件来处理管理 Cookies 请求：
-- -------------------- ---- -------
------ ------- ----- ---- -- -
----- --------- - ---------------------
-- ---------- --- --------- -
--------------------------- ------- ------- ------------ -- --- ---- -------- -----
-------------- - ---
---------
- ---- -- ---------- --- ------ -
--------------------------- ---------------- --------
-------------- - ---
---------
- ---- -
-------------- - ---
---------- -------- -------- ---------- --
-
-该文件的逻辑稍微复杂一些。我们首先通过 req.cookies 对象来获取 Cookie 的值。然后，根据获取到的 Cookie 值来执行不同的操作。如果 Cookie 的值为 delete，我们通过 Set-Cookie 头部来删除 Cookie。我们将 Cookie 的 max-age 设置为 0，并且将 Expires 设置为一个过去的时间。这将会删除 Cookie。如果 Cookie 的值为 add，我们通过 Set-Cookie 头部来添加新的 Cookie 值。最后，如果 Cookie 的值既不是 delete，也不是 add，我们将状态码设置为 400，并返回一个 JSON 对象，表示无效操作。
总结
在使用 Next.js 开发应用时，经常需要处理 Cookies。我们可以使用 Next.js 内置的 cookies 模块来方便地处理 Cookies。在 API 端点中，我们可以通过 req.cookies 对象来获取 Cookie 的值，也可以使用 Set-Cookie 头部来设置、修改或删除 Cookie。我们可以根据业务需求来灵活使用这些功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b3465d48841e9894f8840f