Fix Next.js Error: 'Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with use server'
Resolve React Server Component serialization errors when passing callbacks or non-serializable classes across the Server-Client boundary.
Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
// actions.ts
"use server";
export async function submitFormAction(formData: FormData) {
// Server-side logic here
return { ok: true };
}Root Cause & Mechanism Analysis
Why does this error occur?
Props passed from a Server Component to a `"use client"` component must be serialized over the React Flight wire format. Regular JavaScript closures cannot be serialized across the network unless marked as a Server Action (`"use server"`).
Frequently Asked Questions
Can I pass Date or Map objects from Server to Client Components?
Need Zero-Knowledge .env Secret Sync Across Your Engineering Team?
Explore Castov Env Vault for client-side AES-256-GCM encrypted environment sharing, or sponsor this engineering hub.
Related Developer Error Solutions
Browse All 54 GuidesNext.js Hydration Failed
Resolve Next.js React hydration mismatch errors caused by browser-only APIs (window, localStorage), timestamps, or invalid HTML nesting.
Next.js 15/16: Route used `params.id` without awaiting `params`
Resolve Next.js 15 and 16 asynchronous Dynamic API errors where `params`, `searchParams`, `cookies()`, and `headers()` return Promises.
React: Too many re-renders
Prevent infinite re-render loops caused by immediately invoking setState functions inside JSX render bodies.