Next.js客户端获取Cookie问题：使用cookies-next仍无法获取

方法一：原生JavaScript直接读取 #

客户端环境下可直接通过document.cookie获取所有Cookie，写个简单解析函数就能拿到特定Cookie：

// 工具函数：根据名称获取Cookie值
function getCookie(name) {
  const cookieStr = `; ${document.cookie}`;
  const cookieSegments = cookieStr.split(`; ${name}=`);
  if (cookieSegments.length === 2) {
    return cookieSegments.pop().split(';').shift();
  }
  return null;
}

// 在组件中使用（比如 useEffect 钩子内）
useEffect(() => {
  const targetCookie = getCookie('你的目标Cookie名称');
  // 若Cookie不存在，触发Redux删除数据的action
  if (!targetCookie) {
    dispatch(deletePartialReduxData());
  }
}, [dispatch]);

这个方法完全不依赖第三方包，只要是能访问document对象的客户端组件就能用。

方法二：正确使用cookies-next包 #

如果仍想用cookies-next，要注意在客户端生命周期里调用，避免在组件初始化的服务端渲染环节执行：

import { getCookie } from 'cookies-next';
import { useEffect } from 'react';
import { useDispatch } from 'react-redux';

function YourClientComponent() {
  const dispatch = useDispatch();

  useEffect(() => {
    const targetCookie = getCookie('你的目标Cookie名称');
    if (!targetCookie) {
      dispatch(deletePartialReduxData());
    }
  }, [dispatch]);

  // 组件其他逻辑...
}

cookies-next在客户端会自动读取document.cookie，只要确保组件是客户端组件（比如Next.js 13+中添加'use client'指令），且在useEffect这类客户端钩子中调用即可。

关键注意事项 #

• 如果目标Cookie设置了HttpOnly属性，客户端JS无法读取该Cookie，这是浏览器的安全限制。这种情况需要通过服务端接口返回Cookie的存在状态，再由客户端根据接口结果处理Redux状态。
• 修改Redux状态的逻辑要放在客户端环境执行（比如useEffect、用户交互事件），不要在组件顶层直接执行，避免 hydration 不匹配问题。

内容的提问来源于stack exchange，提问作者Gince George