【Next.js】Unhandled Runtime Error が出たときの解消方法

未分類

2023.12.19

【出力されたエラー】

Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props.
  <... fontSize="30" borderColor="white" marginRight=... bg=... color=... borderRadius=... boxShadow=... p=... textAlign=... onClick={function} children=...>
                                                                                                                                     ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.

Call Stack
<unknown>
/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:280237)
Object.toJSON
/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:281132)
stringify
<anonymous>
<unknown>
/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267488)
ez
/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267567)
eH
/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:267968)
Timeout._onTimeout
/app/node_modules/next/dist/compiled/next-server/app-page.runtime.dev.js (35:264466)
listOnTimeout
node:internal/timers (569:17)
process.processTimers
node:internal/timers (512:7)

【解消方法】

ファイルの先頭に以下を記載する