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

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"
  }

Adding Interactivity ページから始めて、Next.js 15.5.5 アプリで例を再現し、その後 Vite の結果と比較します。報告されたサーバー/クライアントコンポーネントのエラーについて、ページにどのようなガイダンスまたは例の調整が必要かを判断します。ページが期待される動作を正確に示し、動作する手順を文書化できれば完了です。