text: import { ServerStyleSheets } from "@material-ui/core/styles";
  import Document, { Head, Html, Main, NextScript } from "next/document";
  import React, { Children } from "react";
  
  export default class MyDocument extends Document {
    static async getInitialProps(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 { styles, ...initialProps } = await Document.getInitialProps(ctx);
  
      return {
        ...initialProps,
        // Styles fragment is rendered after the app and page rendering finish.
        styles: [...Children.toArray(styles), sheets.getStyleElement()],
      };
    }
  
    render() {
      return (
        <Html>
          <Head>
            <link
              rel="stylesheet"
              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
            />
          </Head>
          <body>
            <Main />
            <NextScript />
          </body>
        </Html>
      );
    }
  }
  