update jamespong14205,

2025-02-01 02:02:25 +08:00
parent 8bf2589af5
commit c3a16177eb
90 changed files with 9071 additions and 6 deletions
--- a/task1/project/003_src/client/pages/_document.js
+++ b/task1/project/003_src/client/pages/_document.js
@@ -0,0 +1,98 @@
+import { ServerStyleSheets } from '@mui/styles';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
+
+import theme from '@/config/theme';
+
+export default class MyDocument extends Document {
+  componentDidMount() {}
+
+  render() {
+    return (
+      <Html lang='en'>
+        <Head>
+          <meta charSet='utf-8' />
+          {/* PWA primary color */}
+          <meta name='theme-color' content={theme.palette.primary.main} />
+        </Head>
+        <style jsx global>
+          {`
+            html,
+            body {
+              padding: 0;
+              margin: 0;
+              font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fica Sans,
+                Droid Sans, Helvetica Neue, sans-serif;
+            }
+
+            a {
+              color: inherit;
+              text-decoration: none;
+            }
+
+            * {
+              box-sizing: border-box;
+            }
+          `}
+        </style>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+MyDocument.getInitialProps = async ctx => {
+  // Resolution order
+  //
+  // On the server:
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. document.getInitialProps
+  // 4. app.render
+  // 5. page.render
+  // 6. document.render
+  //
+  // On the server with error:
+  // 1. document.getInitialProps
+  // 2. app.render
+  // 3. page.render
+  // 4. document.render
+  //
+  // On the client
+  // 1. app.getInitialProps
+  // 2. page.getInitialProps
+  // 3. app.render
+  // 4. page.render
+
+  // Render app and page and get the context of the page with collected side effects.
+  const sheets = new ServerStyleSheets();
+  const sheet = new ServerStyleSheet();
+  const originalRenderPage = ctx.renderPage;
+
+  try {
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: App => props => sheet.collectStyles(sheets.collect(<App {...props} />)),
+      });
+
+    const initialProps = await Document.getInitialProps(ctx);
+
+    return {
+      ...initialProps,
+      // Styles fragment is rendered after the app and page rendering finish.
+      styles: (
+        <>
+          {initialProps.styles}
+          {sheets.getStyleElement()}
+          {sheet.getStyleElement()}
+          {/* {flush() || null} */}
+        </>
+      ),
+    };
+  } finally {
+    sheet.seal();
+  }
+};