Next.js · next build (prerender)

Functions cannot be passed directly to Client Components

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.

What it means

Same rule as above for props not named on*: a Server Component passed a plain function (a formatter, a callback, a render prop) to a Client Component.

Common causes

• formatPrice={(n) => …} passed from a page to a client chart or table
• A render prop like renderItem from a Server Component
• Passing a function reference when you meant to pass its result

How to fix it

1. Pass data, not functions: call the function on the server and pass the result
2. Or import the helper directly inside the Client Component
3. If it must run on the server when the client calls it, make it a Server Action in a "use server" file

Prompt for Cursor or Claude Code

A Server Component passes a function prop to a Client Component and Next.js refuses to serialize it. Find it, then either pass the computed value instead, import the helper inside the client file, or turn it into a Server Action if it needs server access.

Not quite your error? Paste yours into the free VibeBoot Doctor or browse the Next.js error fixer.