Next.js 13.4服务器动作设置Cookie报错：提示仅可在Server Action/Route Handler中修改

问题原因 #

你在服务器组件的渲染流程中直接调用修改Cookie的Server Action，而服务器组件运行在GET请求上下文里，此时响应头已处于不可修改状态，即便setCookie标注了"use server"，也无法触发能修改响应头的正确上下文，导致报错。

修复方案 #

方案一：用Route Handler处理创建日历与设置Cookie #

创建app/api/create-calendar/route.ts：

import { cookies } from "next/headers";
import { prisma } from "@/lib/prisma";
import { redirect } from "next/navigation";

export async function POST() {
  const calendar = await prisma.calendar.create({ data: {} });
  cookies().set("calenderId", calendar.id);
  redirect("/");
}

在服务器组件page.tsx中，检测到无calenderId时引导触发该接口：

import { getCookie } from "@/app/actions";

export default async function Home() {
  const calenderId = await getCookie();

  if (!calenderId) {
    return (
      <form action="/api/create-calendar" method="POST">
        <button type="submit">创建日历</button>
      </form>
    );
  }

  return <div>已存在日历：{calenderId}</div>;
}

方案二：合并逻辑到Server Action并通过客户端触发 #

把创建日历和设置Cookie的逻辑合并，通过客户端交互触发：

app/actions.ts：

import { cookies } from "next/headers";
import { prisma } from "@/lib/prisma";

export async function createCalendarAndSetCookie() {
  "use server";
  const calendar = await prisma.calendar.create({ data: {} });
  cookies().set("calenderId", calendar.id);
}

创建客户端组件（或在服务器组件中嵌入）：

"use client";

import { createCalendarAndSetCookie } from "@/app/actions";
import { useRouter } from "next/navigation";
import { useEffect } from "react";

export default function CalendarSetup() {
  const router = useRouter();

  useEffect(() => {
    const setup = async () => {
      await createCalendarAndSetCookie();
      router.refresh();
    };
    setup();
  }, [router]);

  return <div>正在创建日历...</div>;
}

方案三：服务器组件重定向到Route Handler #

完全在服务器端处理，无需用户交互：

page.tsx：

import { getCookie } from "@/app/actions";
import { redirect } from "next/navigation";

export default async function Home() {
  const calenderId = await getCookie();

  if (!calenderId) {
    redirect("/api/create-calendar");
  }

  return <div>日历ID：{calenderId}</div>;
}

对应的app/api/create-calendar/route.ts同方案一，完成操作后重定向回首页。

关键注意点 #

• 修改Cookie必须在POST请求上下文（表单/客户端触发的Server Action）或Route Handler中执行，GET请求的服务器组件渲染阶段无法修改响应头。
• 确保Server Action的"use server"标注正确，且函数未被解构或间接调用（你的代码这部分没问题）。

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