React+Next.js实现已登录用户禁止访问登录页并跳转至仪表盘

错误原因 #

你遇到的报错根源在于两点：

• 错误从context.req.headers.cookies获取Cookie，该字段是原始字符串格式（类似email=xxx; auth=yyy），并非解析后的键值对对象，直接返回会触发JSON序列化失败；
• 当cookies为undefined时，返回的props包含undefined值，而Next.js要求getServerSideProps返回的props必须是可序列化的JSON，undefined不满足该要求。

修复后的代码 #

import { GetServerSidePropsContext } from 'next';

export async function getServerSideProps(context: GetServerSidePropsContext) {
  // 直接使用Next.js内置解析好的cookies键值对对象
  const cookies = context.req.cookies;
  
  if (cookies?.email) {
    return {
      redirect: {
        destination: "/dashboard",
        statusCode: 302,
      },
      props: {},
    };
  }
  
  // 若页面无需Cookie数据，直接返回空props；若需要则只返回可序列化的必要字段
  return {
    props: {
      // 示例：仅返回需要的字段，用null兜底避免undefined
      // email: cookies?.email || null
    },
  };
}

关键优化点 #

• 改用context.req.cookies：Next.js会自动解析请求头中的Cookie字符串为键值对对象，无需手动处理；
• 用可选链?.简化判断：cookies?.email等价于cookies && cookies.email，代码更简洁；
• 杜绝返回undefined：若页面不需要Cookie数据，直接返回空props；若需要则仅返回字符串、数字等可序列化类型，用|| null兜底避免出现undefined。

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