NextJS中如何在Server Component内调用Server Action设置Cookie？

AI 小北

2026-6-28

问题分析与解决方案

你遇到的错误核心原因是：在Server Component中直接同步/异步调用带"use server"标记的函数时，该函数是在页面渲染的服务器上下文里执行的，并非作为独立的Server Action请求触发。Next.js只有在Server Action被客户端触发（比如表单提交、客户端API调用）时，才会将其转为POST请求，进入允许修改Cookie的专属上下文。

两种可行的解决方式

方式一：通过客户端触发Server Action

这是符合Next.js设计规范的标准做法，让Server Action通过用户交互（比如按钮点击、表单提交）触发，此时Next.js会自动处理POST请求转换，确保能正确修改Cookie。

修改后的代码示例：

import { cookies } from "next/headers";

async function setCookieAction() {
  "use server";
  cookies().set("serverAction", "cookieValue");
}

export default function ServerActionPage() {
  return (
    <div>
      <form action={setCookieAction}>
        <button type="submit">设置Cookie</button>
      </form>
    </div>
  );
}

方式二：使用Route Handler实现服务器端初始化Cookie

如果需要在页面加载时自动设置Cookie（无需用户交互），可以创建Route Handler，然后在Server Component中发起服务器端的fetch请求调用它：

创建app/api/init-cookie/route.ts文件：

import { cookies } from "next/headers";
import { NextResponse } from "next/server";

export async function POST() {
  cookies().set("serverAction", "cookieValue");
  return NextResponse.json({ status: "success" });
}

在Server Component中调用：

export default async function ServerComponentPage() {
  // 服务器端fetch，不会发送到客户端浏览器
  await fetch(`${process.env.NEXT_PUBLIC_APP_URL}/api/init-cookie`, {
    method: "POST",
  });

  return <div>Hello</div>;
}