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

TL;DR

Add the "use server" directive at the top of the file (or inside the function body) that defines the server action. The build passes once the function is marked.

The exact error

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

Steps to fix

1. Find the function you are passing from the server component to the client component
2. Add "use server" as the first line of that function or its module
3. Make sure the function only takes and returns serializable values
4. Rebuild; the error should be gone

When this applies

• Next.js 13.4+ app router
• Passing a server-defined function to a client component as a prop

When this does NOT apply

• Plain callbacks defined inside the client component itself
• Server components calling other server code

Tool + versions

Next.js 13.4+ app router

Why it happens

Functions are not serializable across the server/client boundary. The "use server" mark tells Next.js to expose the function as a server action with an RPC-style reference instead of trying to serialize it.

Edge cases

• Only serializable arguments cross the boundary
• Inline "use server" inside the function body works for single functions

Where this came from

Resolved from a real public thread: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations (docs:server-actions-use-server).