Next.js 14 App Router报错疑问：未用客户端组件却提示相关错误

问题重现 #

使用Next.js 14 App Router时遇到以下错误：

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.

疑问：代码里没有显式使用客户端组件，为什么报错提到客户端组件？

代码示例 #

action/index.js #

export const handleSubmit = async(formData) => {
    console.log(formData.get("name"));
}

ui/AddTaskForm.jsx #

import {handleSubmit} from "@/app/action/index"
const AddTaskForm = () => {
    return (
        <form action={handleSubmit} className="mt-10 flex flex-col gap-4 w-[300px] mx-auto">
            <div className="flex flex-col gap-2">
                <label htmlFor="name">Name</label>
                <input className="border border-black" type="text" id="name" name="name" />
            </div>
            <button type="submit" className="bg-purple-500 py-2">Submit</button>
        </form>
    );
};
export default AddTaskForm;

page.js #

import AddTaskForm from '@/app/ui/AddTaskForm';
export default function Home() {
  return (
    <AddTaskForm/>
  );
}

原因分析 #

错误信息没有误导性，核心原因如下：

• Next.js 14 App Router中组件默认是服务器组件，但当你给<form>的action属性传递函数时，Next.js会自动将该组件（这里是AddTaskForm）标记为客户端组件——因为表单提交是浏览器端触发的行为，需要客户端环境处理函数引用。
• 你的handleSubmit是未标记的普通异步函数，被当作服务器函数传递给了自动转为客户端的AddTaskForm，违反了"服务器函数不能直接传给客户端组件，必须用'use server'暴露"的规则，因此触发报错。

解决方法 #

在handleSubmit函数顶部添加"use server"指令，将其标记为服务器动作（Server Action）：

// action/index.js
export const handleSubmit = async(formData) => {
    "use server"; // 新增这一行
    console.log(formData.get("name"));
}

这样就明确告知Next.js这是一个可以被客户端组件调用的服务器函数，错误即可解决。

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