Next.js 13 <button onClick={}> Event handlers cannot be passed to Client Component props

The Problem

In Next.js 13, you might have encountered the following error when trying to use an event handler with a button:

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

This occurs because in Next.js 13, components are marked as Server Components by default. In a Server Component, browser APIs, event handlers, and certain React Hooks cannot be used. This is because the code for Server Components is pre-rendered into HTML on the server, where those aspects of the browser are not available.

The Solution

The following code will result in the error above:

export default function Home() {
  return (
    <main>
      <div>
        <h1>Hello World</h1>
        <button onClick={() => alert("Hello World")}>Click Me</button>
      </div>
    </main>
  );
}

To resolve the error, we can move the <button> component into a separate component that is marked as a Client Component:

"use client"
export default function MyButton() {
  return <button onClick={() => alert("Hello World")}>Click Me</button>;
}

Then, in the Home component, we can use it as follows:

export default function Home() {
  return (
    <main>
      <div>
        <h1>Hello World</h1>
        <MyButton />
      </div>
    </main>
  );
}

This will solve the error by moving the browser interactivity into its own component. The Home component is pre-rendered on the server, but the MyButton component has its browser interactivity added during hydration.