Next.js v14中Server Actions修改Cookies报错问题排查

你在Server Component的渲染流程中直接调用了Server Action，这违反了Next.js的规则。Server Component在页面初始化渲染时运行，此阶段没有用户交互的请求上下文，而修改Cookie的操作必须在用户触发的Server Action上下文（如表单提交、按钮点击）中执行，不能在组件渲染阶段直接调用。

方案1：通过表单触发Server Action（推荐） #

将Server Action挂载到表单的action属性，由用户点击提交按钮触发：

1. 统一管理Server Action到actions.ts：

// src/app/actions.ts
'use server';

import { cookies } from 'next/headers';

export async function exampleAction() {
    cookies().set('name', 'Delba');
    cookies().delete('name');
}

export async function serverActionCookies() {
    cookies().set('name', 'Delba');
    cookies().delete('name');
}

2. 修改page.tsx，用表单触发：

// src/app/page.tsx
import React from 'react';
import { exampleAction, serverActionCookies } from './actions';

const Page = () => {
    return (
        <>
            <form action={exampleAction}>
                <button type="submit">执行exampleAction</button>
            </form>
            <form action={serverActionCookies}>
                <button type="submit">执行serverActionCookies</button>
            </form>
            Test server action
        </>
    );
};

export default Page;

方案2：在Client Component中通过交互触发 #

如果需要用按钮点击等自定义交互触发，将组件标记为Client Component后调用：

// src/app/page.tsx
'use client';

import React from 'react';
import { exampleAction } from './actions';

const serverActionCookies = async () => {
    'use server';
    const { cookies } = require('next/headers');
    cookies().set('name', 'Delba');
    cookies().delete('name');
};

const Page = () => {
    const handleTrigger = async () => {
        await exampleAction();
        await serverActionCookies();
    };

    return (
        <>
            <button onClick={handleTrigger}>触发所有Server Action</button>
            Test server action
        </>
    );
};

export default Page;

• Server Action必须由用户交互触发，Next.js才会为其创建合法的请求上下文，允许修改Cookie。
• 在Server Component中直接await Server Action会将其当作普通异步函数执行，无法触发Server Action的专用上下文，因此报错。

内容的提问来源于stack exchange，提问作者Léo Lhuile