text: import React from "react";
  import Document, { Html, Head, Main, NextScript } from "next/document";
  import { ServerStyleSheets } from "@material-ui/styles";
  
  class MyDocument extends Document {
    render() {
      return (
        <Html lang="en">
          <Head>
            <meta charSet="utf-8" />
            <meta name="theme-color" content="#000000" />
            <link rel="shortcut icon" href={require("assets/img/favicon.png")} />
            <link
              rel="apple-touch-icon"
              sizes="76x76"
              href={require("assets/img/apple-icon.png")}
            />
            {/* Fonts and icons */}
            <link
              rel="stylesheet"
              href="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"
            />
            <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
            <link
              rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons"
            />
            <link
              href="https://fonts.googleapis.com/icon?family=Material+Icons"
              rel="stylesheet"
            />
            <link
              rel="stylesheet"
              href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
            />
          </Head>
          <body>
            <div id="page-transition"></div>
            <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: [
        <React.Fragment key="styles">
          {initialProps.styles}
          {sheets.getStyleElement()}
        </React.Fragment>,
      ],
    };
  };
  
  export default MyDocument;
  