Next.js12使用Auth0的withPageAuthRequired出现res访问报错如何解决

报错触发原因 #

该报错出现在Next.js 12.0.4搭配@auth0/nextjs-auth0@1.6.x版本的场景下，是因为withPageAuthRequired的内部封装逻辑会在嵌套的getServerSideProps执行完成后继续持有ctx.res的引用，触发Next.js 12新增的服务端资源检测规则。

可行解决方法 #

• 方案1：升级@auth0/nextjs-auth0依赖到1.7.0及以上版本，官方在该版本已经修复了引用持有问题，无需修改现有业务代码即可消除报错。
• 方案2：如果暂时无法升级依赖，调整getSession的传参逻辑，去掉ctx.res参数即可，1.6.x版本的getSession支持仅传入请求对象获取用户会话：

export const getServerSideProps = withPageAuthRequired({
  async getServerSideProps(ctx){
    // 仅传入req参数获取会话，避免持有res引用
    const session = getSession(ctx.req);
    return {
      props: {
        customProp:'bar'
      }
    };
  }
});

• 方案3：若调整传参后仍有报错，可将身份校验逻辑和会话获取逻辑拆分，手动完成鉴权后再获取会话，避免使用嵌套的getServerSideProps写法。

注意事项 #

所有对ctx.res的操作都需要放在getServerSideProps的return语句之前完成，不要在异步回调、定时器等延迟执行逻辑中操作res对象，否则会重复触发该类报错。

内容的提问来源于stack exchange，提问作者Zachary Toney