Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"
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}/>}This is a new upcoming Next.js feature called server actions. You can use server actions to pass async functions from server to client components while having them still be callable from client. Here's an example: // 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> ); }
Get this solution programmatically \u2014 free, no authentication.
curl https://depscope.dev/api/error/66dd2a0085087a2772f3a62218c6f72a36918720eefe804849709095ea57b245