Next.js App Router中无法设置Cookie的问题求助

你的问题核心是：服务端组件仅支持读取Cookie，无法直接执行修改操作。Next.js明确规定，Cookie的修改逻辑必须放在Server Action或者Route Handler中完成，哪怕是服务端组件也不能突破这个限制。

方案一：用Server Action修改Cookie #

把设置Cookie的逻辑封装成带"use server"指令的Server Action，再在组件内调用即可。修改后的代码示例：

import { cookies } from "next/headers";

function doit() {
  return new Promise<string>((resolve) => {
    setTimeout(() => resolve("doit"), 2000);
  });
}

// 定义Server Action，必须添加"use server"标识
async function setDoneCookie() {
  "use server";
  cookies().set("done", "true");
}

const Home: React.FC = async () => {
  const results = await doit();

  if (results === "doit") {
    await setDoneCookie(); // 调用Server Action执行Cookie修改
  }

  return (
    <div>
      <h1>H1 text</h1>
    </div>
  );
};

export default Home;

方案二：用Route Handler修改Cookie #

创建独立的API路由处理Cookie设置，再在组件中通过fetch调用该路由：

1. 在app/api/set-cookie/route.ts创建路由文件：

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

export async function POST() {
  cookies().set("done", "true");
  return NextResponse.json({ success: true });
}

2. 修改Home组件代码：

function doit() {
  return new Promise<string>((resolve) => {
    setTimeout(() => resolve("doit"), 2000);
  });
}

const Home: React.FC = async () => {
  const results = await doit();

  if (results === "doit") {
    await fetch("/api/set-cookie", { method: "POST" });
  }

  return (
    <div>
      <h1>H1 text</h1>
    </div>
  );
};

export default Home;

两种方案都能解决报错问题，优先推荐Server Action，它更贴合App Router的服务端操作模式，无需额外维护API路由文件。

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