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 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.
Get actionable, code-level insights to resolve Next.js performance bottlenecks and errors.
Run the line of code below to:
Create a free Sentry account
Run the CLI install command to automatically add the Sentry SDK to your project:
npx @sentry/wizard@latest -i nextjs
Start capturing errors and performance issues
Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.