next · 建置與型別
報錯原文
You're importing a component that needs useState. This React hook only works in a client component.
這是什麼意思
在 App Router 裡每個元件預設都是伺服器元件，而某個伺服器元件 import 了一個使用 useState 這類只在瀏覽器裡才有意義的 hook 的檔案。指示詞就是檔案最頂端的一行 'use client'，加上它會把這個檔案以及它 import 的一切都拉進用戶端套件——所以只給真正需要狀態的最小那塊加，而不是整頁加，才是便宜的選擇。反方向上，把結構拆成「用戶端元件把伺服器元件當作 children 接收」，就能把取資料的活留在伺服器。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 裡每個元件預設都是伺服器元件，而某個伺服器元件 import 了一個使用 useState 這類只在瀏覽器裡才有意義的 hook 的檔案。指示詞就是檔案最頂端的一行 'use client'，加上它會把這個檔案以及它 import 的一切都拉進用戶端套件——所以只給真正需要狀態的最小那塊加，而不是整頁加，才是便宜的選擇。反方向上，把結構拆成「用戶端元件把伺服器元件當作 children 接收」，就能把取資料的活留在伺服器。Next.js 13 裡同樣的情形寫作 "It only works in a Client Component but none of its parents are marked with \"use client\""。
Q. 怎麼修？
沒有一行命令能解決。上面的說明寫了該看哪裡。
Q. 這是哪個工具報的？
next。它屬於建置與型別，報錯原文有 16 個詞。