Next14 Server Action未执行：表单提交为何触发GET而非POST？

核心结论 #

你的Server Action未执行确实是因为表单提交触发了GET请求，而Next.js的Server Action底层仅支持POST方法调用，这直接导致Action无法被触发执行。

为什么会出现GET请求？ #

可能的原因及排查方向：

1. 缺少Server Action标识
   你的customOnFormData函数没有添加'use server'指令——这是Next.js识别Server Action的必要标记。如果没有这个指令，函数会被当作客户端函数，表单提交会回退到默认的GET请求行为。

2. 表单method被意外覆盖

   • 检查表单是否显式设置了method="get"属性；
   • 检查表单内的提交按钮是否存在formmethod="get"属性，这个属性会覆盖表单的全局method设置。

3. 客户端逻辑干扰
   若表单所在组件有自定义的提交事件处理（比如用onSubmit并调用了preventDefault()但未手动发起POST请求），可能导致页面以GET方式刷新。

解决步骤 #

1. 添加Server Action标识
   在customOnFormData函数顶部添加'use server'指令：

   'use server';
   const customOnFormData = async (formData: FormData) => {
       dispatch(setLoading(true));
       const userId = user.id;
       const companyId = user.company?.id;
       
       console.log("executed")
       const result = await onCompanyForm(formData, { userId, companyId });
       console.log("not executed")
       
       dispatch(setLoading(false));
   };
   

   注意：如果该函数定义在Client Component中，必须添加这个指令；若在Server Component中，也需要确保文件或函数有该标识。

2. 显式指定表单method
   给表单添加method="POST"属性，避免默认行为干扰：

   <form 
     action={customOnFormData}
     method="POST"
   >
     {/* 表单内容 */}
   </form>
   

3. 检查提交按钮配置
   确保所有提交按钮没有formmethod="get"属性：

   <button type="submit">提交</button>
   

4. 对比正常表单的差异
   既然其他相同写法的表单正常工作，可对比以下差异：

   • 该表单所在组件是Client Component还是Server Component？
   • 正常表单的Action函数是否添加了'use server'？
   • 表单内的元素是否有特殊配置？

验证 #

完成上述修改后，再次提交表单，终端应显示类似POST /formulaire-profil...的请求，此时Server Action应该会正常执行。

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