获取 Next.js 13 服务器端组件中的 Cookie

本文介绍了在 Next.js 13 的服务器端组件中获取 Cookie 的方法。由于 document.cookie 在服务器端不可用，我们将使用 next/headers 提供的 cookies() 函数来安全有效地访问 Cookie。

在 Next.js 13 中，服务器端组件提供了强大的服务器端渲染能力。 然而，直接访问客户端的 document.cookie 在服务器环境中是不可能的。 Next.js 提供了一个专门的 API 来处理服务器端组件中的 Cookie。

使用 next/headers 获取 Cookie

next/headers 模块提供了一个 cookies() 函数，它允许你在服务器端组件中访问 Cookie。以下是如何使用它：

import { cookies } from 'next/headers';

export default async function MyComponent() {
  const cookieStore = cookies();
  const myCookie = cookieStore.get('cookieName');

  if (myCookie) {
    const cookieValue = myCookie.value;
    console.log('Cookie value:', cookieValue);
    return (
      

        Cookie value: {cookieValue}
      
    );
  } else {
    return (
      

        Cookie not found.
      
    );
  }
}

代码解释：

Pebblely

AI产品图精美背景添加

下载

1. import { cookies } from 'next/headers';: 导入 cookies 函数。
2. const cookieStore = cookies();: 调用 cookies() 函数获取 Cookie 存储对象。
3. const myCookie = cookieStore.get('cookieName');: 使用 get() 方法根据 Cookie 名称获取特定的 Cookie 对象。
4. if (myCookie): 检查 Cookie 是否存在。
5. const cookieValue = myCookie.value;: 如果 Cookie 存在，使用 .value 属性获取 Cookie 的值。
6. console.log('Cookie value:', cookieValue);: 在服务器端控制台打印 Cookie 值。
7. 渲染逻辑: 根据 Cookie 是否存在，渲染不同的 UI。

注意事项：

• cookies() 函数只能在服务器端组件中使用。
• cookies() 函数返回的是一个只读的 Cookie 存储对象。 你不能直接修改 Cookie。
• 如果 Cookie 不存在，cookies().get('cookieName') 将返回 undefined。

总结：

使用 next/headers 提供的 cookies() 函数是在 Next.js 13 服务器端组件中获取 Cookie 的推荐方法。 它安全、高效，并且与 Next.js 的服务器端渲染特性完美集成。 通过这种方式，你可以在服务器端安全地访问和使用 Cookie 信息，从而构建更加动态和个性化的 Web 应用。