Next.js中Shadcn+React Hook Form的Server Action函数未触发

1. 确认Server Action在表单提交中被正确调用 #

首先检查你的onSubmit函数里是否主动调用了addProduct，并且用await处理异步操作（Server Action本质是异步函数）：

// ProductForm.tsx 中的onSubmit示例
const onSubmit = async (data: z.infer<typeof ProductSchema>) => {
  console.log(data); // 你提到这步正常执行
  try {
    // 必须主动调用addProduct并await
    await addProduct(data);
    console.log("Server Action执行成功");
  } catch (err) {
    console.error("Server Action调用失败:", err); // 捕获错误排查问题
  }
};

同时确保表单的onSubmit绑定的是handleSubmit(onSubmit)：

<form onSubmit={handleSubmit(onSubmit)}>
  {/* 表单内容 */}
  <button type="submit">提交产品</button>
</form>

2. 检查Server Action的定义规范 #

确保addProduct的定义符合Next.js Server Action要求：

• 如果是文件级别的Server Action，必须在文件最顶部声明'use server'（在所有导入之前）：

  // app/admin/_actions/products.ts
  'use server';
  
  import fs from 'fs/promises';
  import prisma from '@/lib/prisma';
  
  export async function addProduct(data: 你的表单数据类型) {
    // 处理fs操作与Prisma写入逻辑
    await prisma.product.create({ data });
    // 示例fs操作：写入文件
    await fs.writeFile('./product-log.txt', JSON.stringify(data));
  }
  

• 如果是单个函数的Server Action，'use server'必须放在函数内部第一行，且函数必须是顶层导出（不能嵌套在其他函数里）：

  import fs from 'fs/promises';
  import prisma from '@/lib/prisma';
  
  export async function addProduct(data: 你的表单数据类型) {
    'use server';
    // 业务逻辑
  }
  

3. 排查错误静默问题 #

很多时候Server Action调用失败但没有抛出可见错误，一定要在onSubmit中加入try/catch捕获异常，查看控制台的错误信息——比如Prisma数据库连接失败、fs操作权限不足、表单数据类型不匹配等，都可能导致Server Action执行失败但表面看起来没被调用。

4. 验证Next.js环境配置 #

• 确保你的Next.js版本≥13.4.0（Server Action在13.4稳定版才正式支持），查看package.json中的next版本号。
• 检查next.config.js中是否禁用了Server Action：如果有experimental.serverActions: false，需要删除该配置（默认是开启的）。

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