Next.js · next build (prerender)

Event handlers cannot be passed to Client Component props

Error occurred prerendering page "/pricing".
Error: Event handlers cannot be passed to Client Component props.
  {onClick: function onClick, children: ...}
            ^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

What it means

A Server Component rendered an element with onClick, onChange or any prop starting with "on" set to a function. Functions can't be sent from the server to the browser, so rendering stops.

Common causes

• onClick added to a <button> directly in page.tsx
• A Server Component passes onSomething={() => …} to a Client Component
• It often only shows up at next build, when the page is prerendered

How to fix it

1. Move the button (and its handler) into a "use client" component
2. Or keep it on the server: use a <form action={serverAction}> instead of onClick
3. If the child is already a Client Component, define the handler inside it instead of passing it down

Prompt for Cursor or Claude Code

next build fails with "Event handlers cannot be passed to Client Component props". Find the Server Component that sets an on* prop to a function, and either move that element into a "use client" component or replace the handler with a Server Action used as a form action. Show me the diff.

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