Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

Question

Got this error message in Next.js but have no idea what to do with this. Next.js version 13.0.5.

I was passing a prop to a client component in Next.js. Prop is the list of objects, and one of the values is a function. But the question is, what this error message means?

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"

How can I expose a function by marking it with "use server"?

matchesColumns.push({ field: 'pk', headerName: "", flex: 0.3, renderCell: (params, event) => (<Link href={`/matches/${encodeURIComponent(params.row.pk)}`}>Details</Link>) });
(...)
{<Tabela2 rows={matchesRows} columns={matchesColumns}/>}

Answer 1

这是 Next.js 即将推出的一项新功能，称为服务器操作。

您可以使用服务器操作将异步函数从服务器传递到客户端组件，同时仍然可以从客户端调用它们。

这是一个例子：

// page.tsx

"use server";

import { ClientComponent } from './ClientComponent.tsx';

async function deleteItem(itemId: string) {
  "use server"; // mark function as a server action (fixes the error)

  // TODO add item deletion logic
  return null;
}

export function Page() {
  return <ClientComponent deleteItem={deleteItem} />
}

// ClientComponent.tsx

export function ClientComponent({ deleteItem }) {
  return (
    <button onClick={async () => {
      await deleteItem("foobar");
      alert("item has been deleted");
    }}>
      delete item
    </button>
  );
}

Answer 2

如果您在error.(jsx|tsx)文件中遇到此错误，请注意该error.(jsx|tsx)文件必须标记为客户端组件。

文档参考