next.js 报错“event handlers cannot be passed to client component props”通常并非因缺失 `”use client”`，而是该指令未被 next.js 构建系统正确识别——关键在于它必须位于**实际被应用代码直接导入的模块入口文件**中，而非仅存在于底层实现文件。
在 Next.js 的服务端渲染（SSR）和组件编译流程中，”use client” 是一个编译时指令（directive），而非运行时标记。Next.js 依赖静态分析来判断某个模块是否为客户端组件，并据此决定：
- 是否允许使用事件处理器（如 onClick）、Hooks（如 useState）、浏览器 API 等；
- 是否将其打包进客户端 bundle 并禁用服务端渲染（SSR）；
- 是否阻止将该模块的 props 序列化传递给服务端组件。
因此，即使你的 Button.js 文件顶部写了 “use client”，但如果应用代码是通过类似 import { Button } from “my-ui” 这样的路径导入，而该包的入口文件（如 node_modules/my-ui/index.js）未声明 “use client”，Next.js 就会将整个导入视为“服务端可访问模块”，进而对其中导出的组件进行严格 props 序列化检查——此时 onClick 函数无法被序列化，从而触发该错误。
✅ 正确做法：确保 “use client” 出现在被直接 import 的模块文件顶部（即“入口层”），而非仅在深层实现文件中。
例如，假设你发布了一个 UI 包 my-ui，目录结构如下：
my-ui/ ├── index.js ← ❌ 错误：此处无 "use client" ├── Button/ │ ├── Button.js ← ✅ 此处有 "use client"，但不足够 │ └── index.js ← ✅ 正确：此处需添加 "use client"
你需要在 Button/index.js 中显式启用客户端模式：
