为什么我不能在next.js页面中触发表单提交事件?

我在pages/login中有一个非常简单的登录表单但是,当我尝试提交它时,提交事件似乎永远不会被调用,默认事件也不会被阻止。

const login = () => {
  return (
    <Fragment>
      <form
        onSubmit={async e => {
          // never called
          debugger;
          e.preventDefault();
        }}
      >
        <div>
          <label>Email:</label>
          <input type="text" name="email" />
        </div>
        <div>
          <label>Password:</label>
          <input type="password" name="password" />
        </div>
        <div>
          <input type="submit" value="Log In" />
        </div>
      </form>
      <div>
        Don't have an account?
        <Link href="/signup">
          <a>Sign up here</a>
        </Link>
      </div>
    </Fragment>
  );
};

export default login;

我希望调试器被命中,默认事件被阻止,但两者都没有发生。我在React中做过很多类似的事情,但是我对next.js还比较陌生,所以我认为这一定是由于next的一些行为导致的,我不理解。感谢任何帮助!

编辑*好的,我找到了引起这个错误的原因在服务器上,我使用jwt auth,所以我有这个代码来防止未经身份验证的用户查看任何页面。

../server/app.js(主服务器模块)

server.use(
      jwt({
        secret: process.env.JWT_SECRET
      }).unless({ path: ["/login", "/signup", "/graphql"] })
    );

    server.use((err, req, res, next) => {
      if (err.name === "UnauthorizedError") {
        return res.redirect("/login");
      }
      next();
    });

当我注释掉这段代码时,客户端上的表单将正常处理不知道为什么会有影响,但无论如何,我需要那个代码,所以我很想知道为什么它会导致一个问题!