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

Bắt đầu từ trang Adding Interactivity và tái hiện ví dụ trong một ứng dụng Next.js 15.5.5, sau đó so sánh với kết quả trên Vite. Xác định trang cần hướng dẫn hoặc điều chỉnh ví dụ nào cho lỗi component server/client đã được báo cáo; công việc được xem là hoàn tất khi trang nêu chính xác những gì cần kỳ vọng và ghi lại một cách thực hiện hoạt động được.