Next.js 13.4中Server Action设置Cookie报错问题求助

核心错误：表单Action的调用方式错误 #

你当前的代码在表单action中直接调用了setLocaleCookie(locale)，这会导致客户端组件渲染时立即执行Server Action，而非在表单提交时触发。这种写法违反了Server Action的使用规则，直接引发两个问题：

1. 渲染阶段执行Server Action，导致服务端上下文与客户端渲染流程冲突，触发“多个渲染器同时渲染同一上下文提供者”警告；
2. 非表单提交触发的Server Action执行逻辑，不符合Next.js对Cookie修改的触发时机限制，因此出现“仅能在Server Action或路由处理器中修改Cookie”错误。

修正方案 #

1. 调整Server Action，通过FormData接收Locale参数 #

修改setLocaleCookie函数，从表单提交的FormData中获取语言参数，而非直接接收参数：

'use server';
import { Locale } from "@/lib/translations/i18n.config";
import { cookies, redirect } from 'next/headers';
import { NextRequest } from 'next/server';

export default async function setLocaleCookie(formData: FormData, request: NextRequest) {
    // 从表单数据中获取locale值
    const locale = formData.get('locale') as Locale;
    if (!locale) return redirect('/');

    cookies().set({
        name: 'NEXT_LOCALE',
        value: locale,
        path: '/',
        maxAge: 60 * 60 * 24 * 30, // 30天有效期
    });
    
    console.log("NEXT_LOCALE cookie set to:", locale);
    // 重定向到当前页面，让新Cookie生效
    return redirect(request.nextUrl.pathname);
}

2. 修改客户端组件的表单写法 #

将Locale值通过隐藏输入框传递，表单action直接绑定Server Action函数引用（而非调用结果）：

<form action={setLocaleCookie}>
  {/* 隐藏输入框传递locale参数 */}
  <input type="hidden" name="locale" value={locale} />
  <Button type="submit" className='rounded-md border'>
    {locale}
  </Button>
</form>

额外说明 #

• 重定向操作是为了让页面重新加载，读取新设置的Cookie并应用语言偏好；
• 确保'use server'标记位于Server Action文件的最顶部，且该文件未被客户端组件直接导入服务端专属API（你的代码已满足此要求）；
• 修正后，Server Action仅在表单提交时触发，既符合Next.js的规则，也会消除上下文冲突的警告。

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