Next.js服务端动作无法删除Cookie问题求助

问题原因 #

你遇到的Error: Cookies can only be modified in a Server Action or Route Handler错误，核心原因是你在Server Component的渲染流程中直接执行了Cookie修改操作。即使给函数添加了"use server"指令，但组件渲染阶段的执行上下文不允许修改Cookie——Cookie的写操作只能在用户触发的Server Action（如表单提交）或Route Handler中进行。

解决方案 #

方案一：通过表单触发Server Action（需用户交互） #

将删除Cookie的逻辑改为由用户交互触发的Server Action，比如通过表单提交：

import { cookies, redirect } from 'next/headers';

export default function Signout() {
  async function deleteTokens() {
    "use server";
    // 删除指定Cookie
    cookies().delete('accessToken');
    // 删除后重定向到首页或登录页
    redirect('/');
  }

  return (
    <form action={deleteTokens}>
      <p>确认退出登录？</p>
      <button type="submit">退出</button>
    </form>
  );
}

方案二：使用Route Handler（自动完成退出） #

如果希望用户访问/signout路径时自动删除Cookie并跳转，创建Route Handler文件app/signout/route.js：

import { cookies, redirect } from 'next/headers';

export async function GET() {
  cookies().delete('accessToken');
  // 重定向到目标页面（比如首页）
  return redirect('/');
}

注意事项 #

确保你的next.config.js已正确启用Server Actions：

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    serverActions: true,
  },
};

module.exports = nextConfig;

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