App Routerでビルド時に「Event handlers cannot be passed to Client Component props.」というエラーが出ました。原因として最も近いものはどれですか？

解説

正解: Server Component内でonClickなどのイベントハンドラを直接渡しているServer Componentはサーバーでレンダーされるため、ブラウザで実行されるonClickなどのイベントハンドラをそのまま扱えません。このエラーは、Server ComponentのJSXにイベント処理を置いたり、Client Componentへ関数をpropsとして渡したりしたときに発生しやすいです。補足: クリック処理が必要な部分を小さなClient Componentへ切り出し、その内部でイベントハンドラを定義すると解決できます。A. Server Component内でonClickなどのイベントハンドラを直接渡している: これが正解です。B. fetchにrevalidateを指定しているためキャッシュが競合している: キャッシュ設定とは関係のないコンポーネント境界のエラーです。C. Linkコンポーネントのhrefに相対パスを指定している: href指定の問題ではありません。D. metadataオブジェクトにtitleを指定していない: SEO設定の不足でこのエラーは発生しません。