client: fix getInitialProps

packages/client/src/pages/_app.tsx

@@ -6,14 +6,29 @@ import 'tiptap/core/styles/index.scss';
 import { isMobile } from 'helpers/env';
 import { IsOnMobile } from 'hooks/use-on-mobile';
 import { Theme } from 'hooks/use-theme';
-import type { AppProps } from 'next/app';
+import App from 'next/app';
 import Head from 'next/head';
 import React from 'react';
 
-type P = AppProps<{ isMobile?: boolean }>;
+class MyApp extends App<{ isMobile: boolean }, unknown> {
+  state = {
+    locale: '',
+    user: null,
+  };
 
-function MyApp(props: AppProps & { isMobile?: boolean }) {
-  const { Component, pageProps, isMobile } = props;
+  static getInitialProps = async ({ Component, ctx }) => {
+    const request = ctx?.req;
+    const getPagePropsPromise = Component.getInitialProps ? Component.getInitialProps(ctx) : Promise.resolve({});
+    const [pageProps] = await Promise.all([getPagePropsPromise]);
+
+    return {
+      pageProps,
+      isMobile: isMobile(request?.headers['user-agent']),
+    };
+  };
+
+  render() {
+    const { Component, pageProps, isMobile } = this.props;
 
     return (
       <>
@@ -52,14 +67,7 @@ function MyApp(props: AppProps & { isMobile?: boolean }) {
         </Theme.Provider>
       </>
     );
+  }
 }
 
-MyApp.getInitialProps = async (appContext) => {
-  const request = appContext?.ctx?.req;
-
-  return {
-    isMobile: isMobile(request?.headers['user-agent']),
-  };
-};
-
 export default MyApp;