[Bug]: Example in "Adding Interactivity" works with vite but not with nextjs

[moijes12]

Summary

Description

The below code example on the page https://react.dev/learn/adding-interactivity is deployed correctly when I build the project using vite. However, when I try to deploy the same code in a nextjs project, I get error "Event handlers cannot be passed to Client Component props."

export default function App() {
  return (
    <Toolbar
      onPlayMovie={() => alert('Playing!')}
      onUploadImage={() => alert('Uploading!')}
    />
  );
}

function Toolbar({ onPlayMovie, onUploadImage }) {
  return (
    <div>
      <Button onClick={onPlayMovie}>
        Play Movie
      </Button>
      <Button onClick={onUploadImage}>
        Upload Image
      </Button>
    </div>
  );
}

function Button({ onClick, children }) {
  return (
    <button onClick={onClick}>
      {children}
    </button>
  );
}

Please note that I am new to React and am using the articles on this website to learn React. So there could be areas where I may be wrong and I apologize for any inconvenience caused due to my ignorance of certain concepts.

I used NextJS first as it was the recommended framework. Only after the code did not deploy, I tried the same code in a new project but this time I used vite.

The error I see is in the browser as below

Runtime ErrorServer

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

src/app/App.js (3:5) @ App

  1 | export default fun```

Below is the trace from the command line

 ⨯ Error: Event handlers cannot be passed to Client Component props.
  <button onClick={function onPlayMovie} children=...>
                  ^^^^^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
    at stringify (<anonymous>)
    at stringify (<anonymous>) {
  digest: '1272121264'
}
 ⨯ Error: Event handlers cannot be passed to Client Component props.
  <button onClick={function onUploadImage} children=...>
                  ^^^^^^^^^^^^^^^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
    at stringify (<anonymous>)
    at stringify (<anonymous>) {
  digest: '628795184'
}
 GET / 500 in 25260ms

Page

https://react.dev/learn/adding-interactivity

Details

Below are the details of my environment from the package.json

"dependencies": {
    "react": "19.1.0",
    "react-dom": "19.1.0",
    "next": "15.5.5"
  }

[moijes12]

Suggested Fix:

The "Adding Interactivity" section could include a note explaining that for the given example, users using Next.js App Router need to add "use client" at the top of the file as Next.js uses Server Components by default. Example:

"use client";
//... rest of the code
``

[gaearon]

Yeah we should add it everywhere it’s required (and explain it).