Modified _app and _document to ensure matching styling between client…

… and server
Seneca-CDOT · Jan 17, 2021 · 5315146 · 5315146
1 parent 3096095
commit 5315146
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -26,6 +26,9 @@ module.exports = {
     {
       files: ['src/frontend/next/**/*.ts', 'src/frontend/next/**/*.tsx'],
       plugins: ['@typescript-eslint'],
+      env: {
+        browser: true,
+      },
       rules: {
         'react/prop-types': 'off',
         'react/react-in-jsx-scope': 'off',

diff --git a/src/frontend/next/src/pages/_app.tsx b/src/frontend/next/src/pages/_app.tsx
@@ -1,8 +1,18 @@
+import { useEffect } from 'react';
 import { AppProps } from 'next/app';
 import '../styles/globals.css';
 
-const App = ({ Component, pageProps }: AppProps) => {
+// Reference: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_app.js
+const AppComponent = ({ Component, pageProps }: AppProps) => {
+  // This hook is for ensuring the styling is sync between client and server
+  useEffect(() => {
+    // Remove the server-side injected CSS.
+    const jssStyles = document.querySelector('#jss-server-side');
+    if (jssStyles) {
+      jssStyles.parentElement?.removeChild(jssStyles);
+    }
+  }, []);
   return <Component {...pageProps} />;
 };
 
-export default App;
+export default AppComponent;
diff --git a/src/frontend/next/src/pages/_document.tsx b/src/frontend/next/src/pages/_document.tsx
@@ -0,0 +1,50 @@
+import { Children } from 'react';
+import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document';
+import { ServerStyleSheets } from '@material-ui/core/styles';
+
+// Reference: https://github.com/mui-org/material-ui/blob/master/examples/nextjs/pages/_document.js
+class MyDocument extends Document {
+  static async getInitialProps(ctx: DocumentContext) {
+    const initialProps = await Document.getInitialProps(ctx);
+    return { ...initialProps };
+  }
+
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+          <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+MyDocument.getInitialProps = async (ctx) => {
+  // Render app and page and get the context of the page with collected side effects.
+  const sheets = new ServerStyleSheets();
+  const originalRenderPage = ctx.renderPage;
+
+  ctx.renderPage = () =>
+    originalRenderPage({
+      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
+    });
+
+  const initialProps = await Document.getInitialProps(ctx);
+
+  return {
+    ...initialProps,
+    // Styles fragment is rendered after the app and page rendering finish.
+    styles: [...Children.toArray(initialProps.styles), sheets.getStyleElement()],
+  };
+};
+
+export default MyDocument;