nextjs component_error ai_generated true

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it with 'use server'

ID: nextjs/server-actions-error

Also available as: JSON · Markdown
90%Fix Rate
90%Confidence
50Evidence
2023-01-01First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14 active — — —

Root Cause

Passing a server function as prop to a Client Component. Need 'use server' directive.

generic

Workarounds

  1. 95% success Mark the function with 'use server' directive to make it a Server Action 
    'use server';
async function submitForm(data: FormData) { ... }

    Sources: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

  2. 92% success Create a separate actions.ts file with 'use server' at the top 
    // app/actions.ts
'use server';
export async function createItem(data: FormData) { ... }

    Sources: https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations

Dead Ends

Common approaches that don't work:

  1. Convert the function to a client-side function 65% fail

    Loses server-side benefits (DB access, secrets, etc.)

  2. Use an API route instead 55% fail

    Server Actions are the recommended replacement for simple API routes

Error Chain

Frequently confused with: