Next.jsの「Error: Event handlers cannot be passed to Client Component props.」を解決したいっ!

使用バージョンは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";

参考

"use client" は Server Component と Client Component の境界につけよう