能否在Server Component中使用表单与Server Action？报错求助

问题根源 #

Server Component无法绑定客户端交互事件（比如onSubmit），因为它仅在服务器端渲染，不具备客户端交互能力，这就是你遇到报错的核心原因。

解决方案 #

你可以不用将整个表单移到Client Component，推荐以下两种实现方式：

方案一：Server Component中直接使用form的action属性（推荐）

利用Next.js的特性，Server Component中的<form>可以直接通过action属性绑定Server Action，无需客户端事件处理器。将需要传递的参数通过隐藏输入字段提交：

import { insertPrivateAccount } from "@/actions/companyActions";
import { revalidatePath } from "next/cache";
import { getPublicAccount } from "@/services/company";

// 定义Server Action
async function addToPrivateCompany(formData: FormData) {
  'use server';
  const publicId = formData.get('publicId') as string;
  const slug = formData.get('slug') as string;
  
  await insertPrivateAccount(publicId, slug);
  revalidatePath(`/dashboard/accounts/${slug}`);
}

export default async function CompanyProfile({ params }: { params: { slug: string }}) {
    const company = await getPublicAccount(params.slug);
    const publicId = company.id; // company已通过await获取，无需额外await

    return (
        <form action={addToPrivateCompany}>
            {/* 通过隐藏字段传递Server Component中获取的数据 */}
            <input type="hidden" name="publicId" value={publicId} />
            <input type="hidden" name="slug" value={params.slug} />
            <button type="submit">Add Account to Targets</button>
        </form>
    )
}

说明：这种方式完全保留Server Component的特性，所有数据处理在服务器端完成，无需额外客户端代码。

方案二：将表单抽离为独立Client Component

如果需要更灵活的客户端交互逻辑，可以把表单部分单独做成Client Component，由Server Component负责传递数据：

1. 创建Client Component（比如AddAccountForm.tsx）：

'use client';

import { insertPrivateAccount } from "@/actions/companyActions";

export default function AddAccountForm({ publicId, slug }: { publicId: string; slug: string }) {
  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    await insertPrivateAccount(publicId, slug);
    // 重验证逻辑已在Server Action中处理，无需重复执行
  };

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Add Account to Targets</button>
    </form>
  )
}

2. 在Server Component中引入并传参：

import AddAccountForm from './AddAccountForm';
import { getPublicAccount } from "@/services/company";

export default async function CompanyProfile({ params }: { params: { slug: string }}) {
    const company = await getPublicAccount(params.slug);
    const publicId = company.id;

    return (
        <AddAccountForm publicId={publicId} slug={params.slug} />
    )
}

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