client: fix getInitialProps

This commit is contained in:
fantasticit 2022-05-22 22:30:15 +08:00
parent db55765e69
commit f1cb1012f2
1 changed files with 57 additions and 49 deletions

View File

@ -6,60 +6,68 @@ import 'tiptap/core/styles/index.scss';
import { isMobile } from 'helpers/env'; import { isMobile } from 'helpers/env';
import { IsOnMobile } from 'hooks/use-on-mobile'; import { IsOnMobile } from 'hooks/use-on-mobile';
import { Theme } from 'hooks/use-theme'; import { Theme } from 'hooks/use-theme';
import type { AppProps } from 'next/app'; import App from 'next/app';
import Head from 'next/head'; import Head from 'next/head';
import React from 'react'; 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 }) { static getInitialProps = async ({ Component, ctx }) => {
const { Component, pageProps, isMobile } = props; const request = ctx?.req;
const getPagePropsPromise = Component.getInitialProps ? Component.getInitialProps(ctx) : Promise.resolve({});
const [pageProps] = await Promise.all([getPagePropsPromise]);
return ( return {
<> pageProps,
<Head> isMobile: isMobile(request?.headers['user-agent']),
<meta };
name="viewport" };
content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
/> render() {
<meta charSet="utf-8" /> const { Component, pageProps, isMobile } = this.props;
<meta name="description" content={process.env.SEO_DESCRIPTION} />
<meta name="keywords" content={process.env.SEO_KEYWORDS}></meta> return (
<meta name="application-name" content={process.env.SEO_APPNAME} /> <>
<meta name="apple-mobile-web-app-capable" content="yes" /> <Head>
<meta name="apple-mobile-web-app-status-bar-style" content="default" /> <meta
<meta name="apple-mobile-web-app-title" content={process.env.SEO_APPNAME} /> name="viewport"
<meta name="description" content={process.env.SEO_DESCRIPTION} /> content="minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
<meta name="format-detection" content="telephone=no" /> />
<meta name="mobile-web-app-capable" content="yes" /> <meta charSet="utf-8" />
<meta name="msapplication-TileColor" content="#ffffff" /> <meta name="description" content={process.env.SEO_DESCRIPTION} />
<meta name="msapplication-tap-highlight" content="no" /> <meta name="keywords" content={process.env.SEO_KEYWORDS}></meta>
<meta name="theme-color" content="#ffffff" /> <meta name="application-name" content={process.env.SEO_APPNAME} />
<meta property="og:type" content="website" /> <meta name="apple-mobile-web-app-capable" content="yes" />
<meta property="og:title" content={process.env.SEO_APPNAME} /> <meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta property="og:description" content={process.env.SEO_DESCRIPTION} /> <meta name="apple-mobile-web-app-title" content={process.env.SEO_APPNAME} />
<meta property="og:site_name" content={process.env.SEO_APPNAME} /> <meta name="description" content={process.env.SEO_DESCRIPTION} />
<link rel="manifest" href="/manifest.json" /> <meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="/icon192.png" /> <meta name="mobile-web-app-capable" content="yes" />
{((process.env.DNS_PREFETCH || []) as string[]).map((url) => ( <meta name="msapplication-TileColor" content="#ffffff" />
<link key={url} rel="dns-prefetch" href={url} /> <meta name="msapplication-tap-highlight" content="no" />
))} <meta name="theme-color" content="#ffffff" />
</Head> <meta property="og:type" content="website" />
<Theme.Provider> <meta property="og:title" content={process.env.SEO_APPNAME} />
<IsOnMobile.Provider initialState={isMobile}> <meta property="og:description" content={process.env.SEO_DESCRIPTION} />
<Component {...pageProps} /> <meta property="og:site_name" content={process.env.SEO_APPNAME} />
</IsOnMobile.Provider> <link rel="manifest" href="/manifest.json" />
</Theme.Provider> <link rel="apple-touch-icon" href="/icon192.png" />
</> {((process.env.DNS_PREFETCH || []) as string[]).map((url) => (
); <link key={url} rel="dns-prefetch" href={url} />
))}
</Head>
<Theme.Provider>
<IsOnMobile.Provider initialState={isMobile}>
<Component {...pageProps} />
</IsOnMobile.Provider>
</Theme.Provider>
</>
);
}
} }
MyApp.getInitialProps = async (appContext) => {
const request = appContext?.ctx?.req;
return {
isMobile: isMobile(request?.headers['user-agent']),
};
};
export default MyApp; export default MyApp;