Next.js客户端组件中Server Action用Babel编译失败如何解决？

数据老陈

2026-7-19

解决方案

核心原因

Babel转译时会把你的async函数降级为普通函数（通过regenerator工具模拟异步逻辑），导致Next.js的Server Action检测机制无法识别这是符合要求的异步函数，进而抛出错误。

具体修复步骤

升级Next.js到最新稳定版：早期版本的next/babel预设对Server Action的支持存在兼容性问题，升级后Babel预设会正确保留async函数的标识，避免不必要的语法降级。

调整Babel配置：修改.babelrc，添加preset-env配置项，强制保留async/await语法，禁止对其进行降级转换：

{
  "presets": [
    ["next/babel", {
      "preset-env": {
        "targets": {
          "node": "current"
        },
        "exclude": ["transform-async-to-generator", "transform-regenerator"]
      }
    }]
  ]
}

补全Server Action标识：在Server Action函数顶部（或整个文件顶部）添加"use server"指令，这是Next.js识别Server Action的必要标记，防止转译后丢失关键识别信息：
```
"use server";
export async function addTodo(data: FormData) {
  await fetch(...);
}
```
排查冲突插件：检查是否有其他Babel插件（如@babel/plugin-transform-runtime）干扰了async函数的转译逻辑，暂时禁用非必要插件，确认是否为插件冲突导致的问题。