画面側でしか使えないものをサーバー側で使った（Next.js）
You're importing a component that needs useState. This React hook only works in a client component. To fix, mark the file (or its parent) with the "use client" directive.
ひとことで言うと
「useState やボタンを押したときの動きは、ブラウザ側の部品（クライアントコンポーネント）でしか使えません」という意味です。
よくある原因
- Next.js（App Router）のファイルの一番上に
"use client"を書いていない
自分で確かめること
- エラーに出ているファイルの1行目を見る
たいていは、こうすると直ります
そのファイルの一番上（1行目）に "use client"; と書きます。
AIへの伝え方
下の文をコピーして、ChatGPT・Claude・Cursor などに貼り付けてください。トップで貼り付けたエラー文があれば、自動でそれに入れかわります。
次のエラーが出て困っています。プログラミング初心者にもわかるように、原因と直し方を教えてください。必要なら、直したコードも全部見せてください。 【エラー】 You're importing a component that needs useState. This React hook only works in a client component. To fix, mark the file (or its parent) with the "use client" directive. 【やったこと】 （ここに、エラーが出る前にしたことを書く。例：npm run dev を実行した） 【参考】 このエラーは「画面側でしか使えないものをサーバー側で使った（Next.js）」というもので、よくある原因は次のとおりです。 ・Next.js（App Router）のファイルの一番上に `"use client"` を書いていない どれに当てはまるかを確かめる方法も教えてください。