Next.jsの「Error: Event handlers cannot be passed to Client Component props.」を解決したいっ！
2023年12月30日
使用バージョンはNext.js(v14系)です。
実際のコードとは違いますが、create-next-appで生成されたpage.tsxにonClickを追加しただけなのにタイトルのエラーになりました。
export default function Home() {
return (
<button onClick={() => {
console.log('hoge!');
}}>
);
}
エラーを見た感じだと、Next.jsでありがちなサーバーのコードかクライアントのコードか問題ぽいですね。
解決方法
use clientを入れたらクライアントのコードになる。
"use client";