Next.js Server Action Not Callable from Client Component

1. 'use server' directive in client component instead of server file or top of function
2. Server action file not properly exported or imported in client component
3. Passing non-serializable objects to server action (functions, class instances)
4. Server action defined in client component file with 'use client'
5. Async/await not properly handled when calling server action

Create server action file: Make separate file with 'use server' at top, export the async function:
'use server'
export async function submitForm(formData) { ... }

Import in client: In client component, import and call normally:
import { submitForm } from '@/actions'
onClick={() => submitForm(data)}

Handle async: Wrap in useTransition hook for loading state:
const [pending, startTransition] = useTransition()
startTransition(() => submitForm(data))

Pass FormData: For forms, pass FormData object directly, not individual fields.