Next.js+TypeScriptにてgetInitialPropsではなくgetServerSidePropsを使用したいが書き方が分からない。

質問

Next.js + TypeScriptの勉強のため以下のリポジトリの改造を試みています。
https://github.com/jasonraimondi/nextjs-jwt-example
getServerSidePropsをComponentで使用する場合の書き方が分からず詰まってしまいました。

発生している問題・エラーメッセージ

web/components/private_route.tsx

import ServerCookie from "next-cookies";
import Router from "next/router";
import React, { Component } from "react";
import { COOKIES } from "../services/login_service";
import { AuthToken } from "../services/auth_token";

export type AuthProps = {
  auth: AuthToken
}

export function privateRoute(WrappedComponent: any) {
  return class extends Component<AuthProps> {
    static async getInitialProps(ctx: any) {
      const token = ServerCookie(ctx)[COOKIES.authToken];
      const auth = new AuthToken(token);
      const initialProps = { auth };
      if (auth.isExpired) {
        ctx.res.writeHead(302, {
          Location: "/login?redirected=true",
        });
        ctx.res.end();
      }
      if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);
      return initialProps;
    }

    get auth() {
      // the server pass to the client serializes the token
      // so we have to reinitialize the authToken class
      //
      // @see https://github.com/zeit/next.js/issues/3536
      return new AuthToken(this.props.auth.token);
    }

    render() {
      return <WrappedComponent auth={this.auth} {...this.props} />;
    }
  };
}

を
Next.js9.3以降ではgetInitialPropsではなくgetServerSideProps等が推奨されるとのことから、
以下のような形に書き換えたいと思っています。

import ServerCookie from "next-cookies";
import Router from "next/router";
import React, { Component } from "react";
import { COOKIES } from "../services/login_service";
import { AuthToken } from "../services/auth_token";
import { GetServerSideProps } from "next";

export type AuthProps = {
  auth: AuthToken
}

export function privateRoute(WrappedComponent: any) {
  return class extends Component<AuthProps> {
    // static async getInitialProps(ctx: any) {
    //   const token = ServerCookie(ctx)[COOKIES.authToken];
    //   const auth = new AuthToken(token);
    //   const initialProps = { auth };
    //   if (auth.isExpired) {
    //     ctx.res.writeHead(302, {
    //       Location: "/login?redirected=true",
    //     });
    //     ctx.res.end();
    //   }
    //   if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);
    //   return initialProps;
    // }

    get auth() {
      // the server pass to the client serializes the token
      // so we have to reinitialize the authToken class
      //
      // @see https://github.com/zeit/next.js/issues/3536
      return new AuthToken(this.props.auth.token);
    }

    render() {
      return <WrappedComponent auth={this.auth} {...this.props} />;
    }
  };
}

export const getServerSideProps: GetServerSideProps = async (ctx : any) => {
      const token = ServerCookie(ctx)[COOKIES.authToken];
      const auth = new AuthToken(token);
      const initialProps = { auth };
      if (auth.isExpired) {
        ctx.res.writeHead(302, {
          Location: "/login?redirected=true",
        });
        ctx.res.end();
      }
      if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);
      return initialProps;
}

実際に上記の通り書き換えたところ、
(1) getServerSidePropsでreturnしているpropsをprivateRoute関数内で使用したいが、受け渡し方法が分からない。
(2) if (WrappedComponent.getInitialProps) return WrappedComponent.getInitialProps(initialProps);の「WrappedComponent」の部分で「名前 'WrappedComponent' が見つかりません。」とシンタックスエラーが出る。またgetInitialPropsではなくgetServerSidePropsへの書き換え方が分からない。
という問題が出て、詰まっています。
(1)については、公式ドキュメントの解説どおり「function Page({ data }) {」のようにすべきかと思いましたが、このコードの場合、Componentで引数としてWrappedComponentを取るため、こういう場合どのように書けば良いのか分からない状態です。
https://nextjs.org/docs/basic-features/data-fetching#simple-example-1
ちなみにこちらのComponentは、
web/pages/dashboard.tsx
などで使用されており、ログイン時にのみ見れるページを作成する為のComponentになり、Pageのコードにて「export default privateRoute(Page);」のような書き方で使用します。