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 个词。