next · ビルドと型
メッセージ
You're importing a component that needs useState. This React hook only works in a client component.
何を意味するか
App Router では全てのコンポーネントが既定でサーバコンポーネントであり、useState のようにブラウザでしか意味を持たないフックを使うファイルを、サーバコンポーネントが import したという意味です。指示子はファイルの一番上の 'use client' 一行で、付けるとそのファイルとそれが import する全てがクライアントの束に入ります — だからページ全体ではなく、状態が必要な最小の断片にだけ付けるのが安い選択です。逆向きに、クライアントコンポーネントが子としてサーバコンポーネントを受け取る形に分ければ、データ取得はサーバに残せます。Next.js 13 では同じ状況が "It only works in a Client Component but none of its parents are marked with \"use client\"" と書かれていました。
直しかた
一行の命令では終わりません。何を見るべきかを説明に書いてあります。
- 出す道具
- next
- ビルドと型
- 10
ビルドの誤りは実行前に道具が拒んだものなので、その場で何かを壊すわけではありません。代わりに二つを問います — 型や経路を実際の形に合わせて直すのか、それとも as any や抑制のコメント一つでその行だけ通すのか。そして大文字小文字や拡張子、環境変数のように自分の環境でだけ正しいものは、ここで初めて姿を見せます。
エラーメッセージの読み方
- 一行目から読みます。下に行くほど道具の内部の話で、原因はたいてい一番上に書かれています。
- ファイル名と行番号があればそこが出発点です — スタックの最上段ではなく、自分が書いたファイルが出てくる一番上の行です。
- 文句はそのまま検索します。ただし自分のパスや変数名は消します — その部分が検索を邪魔します。
- 同じ事情が道具の版ごとに違う言い方で出ます。結果が合わないときは版番号も入れてみます。
- 直す命令を貼る前に、その命令が何を捨てるかを確かめます。取り消せないものが混ざっています。
よくある質問
Q. You're importing a component that needs useState. This React hook only works in a client component. はどういう意味ですか。
App Router では全てのコンポーネントが既定でサーバコンポーネントであり、useState のようにブラウザでしか意味を持たないフックを使うファイルを、サーバコンポーネントが import したという意味です。指示子はファイルの一番上の 'use client' 一行で、付けるとそのファイルとそれが import する全てがクライアントの束に入ります — だからページ全体ではなく、状態が必要な最小の断片にだけ付けるのが安い選択です。逆向きに、クライアントコンポーネントが子としてサーバコンポーネントを受け取る形に分ければ、データ取得はサーバに残せます。Next.js 13 では同じ状況が "It only works in a Client Component but none of its parents are marked with \"use client\"" と書かれていました。
Q. どう直しますか。
一行の命令では終わりません。何を見るべきかを上の説明に書いてあります。
Q. どの道具が出すエラーですか。
next です。ビルドと型の仲間で、文句は16語です。