Get help on Discord

Error in Next.js tutorial with event handlers in server components.

5 replies
Last updated: Feb 28, 2024
Following the tinder-blockchain tutorial and I’m new to JS, let lone Next.jsI’m getting this error, even though I followed the tutorial with creating a button.


Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
  <button className=... onClick={function} children=...>
                                ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

{currentAccount ? (

<>

<div className={style.currentAccount}>


<Image

src={

'<https://pbs.twimg.com/media/GHQMz5bXUAAmTkd?format=jpg&name=4096x4096>'

}

alt='moralis'

height={20}

width={20}

/>


<span className={style.accountAddress}>

{currentAccount.slice(0, 6)}...{currentAccount.slice(39)}

</span>

</div>


<button className={style.authButton} onClick={() => disconnectWallet()}>

Logout

</button>

</>

) : (

<button className={style.authButton} onClick={() => connectWallet()}>

Login

</button>

)

}
AI Update

Add 'use client' at the very top of your component file (before any imports):

'use client'

import Image from 'next/image'
// ... other imports

export default function YourComponent() {
  // your component code with onClick handlers
}

Why This Happens:

In Next.js 13+ with the App Router, all components are React Server Components by default. Server Components render on the server and can't include interactive JavaScript like event handlers (onClick, onChange, etc.).

When you add 'use client' at the top of the file, you're telling Next.js to treat this as a Client Component, which runs in the browser and can handle user interactions.

Best Practice:

If you're working with Sanity and Next.js, you typically want to:

  • Keep data-fetching components as Server Components (no 'use client')
  • Add 'use client' only to components that need interactivity (buttons, forms, state management)
  • Consider splitting your component: keep the data-fetching part as a Server Component and extract the interactive UI (like your login/logout buttons) into a separate Client Component

For your specific code, since you have onClick handlers for connectWallet() and disconnectWallet(), the entire component needs to be a Client Component, so add 'use client' at the top of the file.

This is a common gotcha when you're new to Next.js 13+ and the App Router. The 'use client' directive is how you opt into client-side interactivity!

add "use client" to the top of your file
import { useClient } from 'react';

^ Like this?
☝️ yep! You can’t have event handlers in server components, since events happen in the client.

the tinder-blockchain tutorial
The tutorial may simply be cursed. /s
It’s always good to read the documentation. Got the client side to work! Thank you

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?