Next.js v14 中的服务器操作出现问题 - Cookie 修改错误

Question

我正在使用 Next.js v14 并遇到服务器操作问题，特别是在尝试修改 cookie 时。尽管遵循文档并确保我的功能是服务器操作，但我仍然面临错误。这是我的设置和问题的简要概述：

组件（src/app/page.tsx）：

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

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

const Test = async () => {
    await exampleAction();
    await serverActionCookies();
    return null;
};

const Page = () => (
    <>
        <Test />
        Test server action
    </>
);

export default Page;

操作（src/app/actions.ts）：

'use server';

import { cookies } from 'next/headers';

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

当我尝试运行此程序时，

exampleAction

和

serverActionCookies

都无法按预期工作。我收到以下错误：

Error: Cookies can only be modified in a Server Action or Route Handler. Read more: https://nextjs.org/docs/app/api-reference/functions/cookies#cookiessetname-value-options

这两个函数都旨在成为服务器操作，但它们似乎并未被识别为服务器操作。我已经检查了文档和代码结构，但我无法弄清楚我遗漏了什么或做错了什么。

提前致谢！

Answer 1

是的。这是一个常见问题。不幸的是，您必须从文档中推断出服务器操作的含义，这并不是 100% 清晰的。

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#behavior - 它说：

服务器操作可以使用元素中的action属性来调用：

和

服务器操作不限于并且可以从 事件处理程序、useEffect、第三方库和其他表单元素（例如 .）调用

这意味着服务器操作只能从基于客户端的组件调用。考虑将表单发布到服务器或调用基于服务器的安全 API 方法来发送敏感的信用卡信息。有道理吗？

因此，在这种情况下，您需要创建一个客户端组件并调用服务器操作

exampleAction()

，可能使用

useEffect

或某些基于客户端的操作。然后，这将调用服务器采取行动并从客户端执行基于服务器的操作。

我希望这有帮助。