AugustoCalaca/_document.tsx

## _document.tsx
import React from 'react';
import { ServerStyleSheet } from 'styled-components';
import { ServerStyleSheets } from '@material-ui/core/styles';
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  static async getInitialProps(context) {
    const styledComponentsSheet = new ServerStyleSheet();
    const materialSheets = new ServerStyleSheets();
    const originalRenderPage = context.renderPage;

    try {
      context.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />)),
        });

      const initialProps = await Document.getInitialProps(context);

      return {
        ...initialProps,
        styles: (
          <React.Fragment>
            {initialProps.styles}
            {materialSheets.getStyleElement()}
            {styledComponentsSheet.getStyleElement()}
          </React.Fragment>
        ),
      };
    } finally {
      styledComponentsSheet.seal();
    }
  }

  render() {
    return (
      <Html>
        <Head>
          <meta name="viewport" content="width=device-width, initial-scale=1" />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;
	import React from 'react';
	import { ServerStyleSheet } from 'styled-components';
	import { ServerStyleSheets } from '@material-ui/core/styles';
	import Document, { Html, Head, Main, NextScript } from 'next/document';

	class MyDocument extends Document {
	static async getInitialProps(context) {
	const styledComponentsSheet = new ServerStyleSheet();
	const materialSheets = new ServerStyleSheets();
	const originalRenderPage = context.renderPage;

	try {
	context.renderPage = () =>
	originalRenderPage({
	enhanceApp: (App) => (props) =>
	styledComponentsSheet.collectStyles(materialSheets.collect(<App {...props} />)),
	});

	const initialProps = await Document.getInitialProps(context);

	return {
	...initialProps,
	styles: (
	<React.Fragment>
	{initialProps.styles}
	{materialSheets.getStyleElement()}
	{styledComponentsSheet.getStyleElement()}
	</React.Fragment>
	),
	};
	} finally {
	styledComponentsSheet.seal();
	}
	}

	render() {
	return (
	<Html>
	<Head>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	</Head>
	<body>
	<Main />
	<NextScript />
	</body>
	</Html>
	);
	}
	}

	export default MyDocument;