Next.js中类内箭头函数触发'use server'错误的原因探究

核心原因：Next.js的组件序列化规则差异 #

Next.js在处理Server Component与Client Component之间的数据传递（或组件内部状态对象的序列化检查）时，会严格遍历对象的可枚举自身属性，并对其中的函数做特殊校验：

• 如果发现对象上直接挂载了函数属性，Next.js会默认认为这是一个需要从服务端暴露给客户端的函数，要求必须标记"use server"，否则就会抛出你遇到的错误。

类箭头函数vs常规原型方法的区别 #

• 你写的箭头函数doSomething = () => {}是实例自身的可枚举属性——它会被直接绑定在每个类实例上，成为实例对象的一部分，序列化时会被Next.js的检查逻辑扫到。
• 而常规函数doSomething()是原型方法，它挂载在类的原型链上，不属于实例自身的可枚举属性，所以Next.js的序列化检查不会遍历到它，自然不会触发函数校验逻辑。

结合MobX的额外说明 #

MobX的observable类本身在Client Component中运行是没问题的，但Next.js的组件边界校验（比如当你的MobX实例在Server Component初始化后传递给Client Component，或者组件内部状态被框架序列化处理时）会把实例上的箭头函数误判为未标记的服务端函数，从而报错。改用原型方法后，因为不在实例自身属性里，就绕过了这个校验。

内容的提问来源于stack exchange，提问作者Martin Gainza