Next.js开发中函数组件向getServerSideProps传值及_app上下文使用报错咨询

报错本质 #

出现“上下文必须在主函数组件内部使用”的报错，核心是没有理清模块的运行边界：

• getServerSideProps是Next.js在服务端执行的独立逻辑，运行时机早于页面的React渲染流程，完全不在React组件树的作用域范围内
• 在_app层定义的React Context，依赖React组件树的上下文传递机制，只能通过useContext这类Hook在组件内部读取，不具备在服务端独立函数中调用的前提，自然会触发上下文使用规则的校验报错
• 尝试“从客户端函数组件向getServerSideProps传值”的思路存在方向偏差：getServerSideProps的设计逻辑是单向向页面组件传递服务端预取的数据，本身不是接收客户端组件传值的通道

落地实现方案 #

• 若需要在服务端获取原本存在全局Context里的状态（比如登录态、全局用户配置），不要直接读取Context，把这类全局状态同步到Cookie中——getServerSideProps可以直接通过context.req.cookies读取Cookie值，完成服务端鉴权和数据初始化
• 若需要把客户端组件产生的数据传到服务端处理，不要依赖仅在页面初始化时执行一次的getServerSideProps，改用路由参数（query/path）、直接调用API路由的方式实现交互
• 若要复用之前写在Context里的业务逻辑，把和React Hook耦合的部分剥离，改成不依赖组件环境的纯函数，即可在getServerSideProps中直接调用

问题参考素材 #

• 实现代码截图：代码截图
• 运行时报错截图：报错截图

内容的提问来源于stack exchange，提问作者Calin Teodor