Next.js App Routerで「You're importing a component that needs useState. It only works in a Client Component but none of its parents are marked with "use client"」と表示されました。正しい対処法は？

解説

正解は「コンポーネントファイルの先頭に"use client"ディレクティブを追加する」です。Next.js 13以降のApp Routerではデフォルトで全コンポーネントがServer Componentとして扱われます。useState・useEffect・onClickなどのブラウザAPIやReactのクライアント専用フックを使うには、ファイル先頭に"use client"を宣言してClient Componentにする必要があります。ただし、"use client"の使用範囲は最小限に留め、インタラクティブな部分だけをClient Componentとして切り出すのがパフォーマンスのベストプラクティスです。