kosciolek · May 4, 2021 13:26
diff --git a/nextjs-styled-components b/nextjs-styled-components
 import Document, { Html, Head, Main, NextScript } from "next/document";
 import { ServerStyleSheet } from "styled-components";

 class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();

    const originalRenderPage = ctx.renderPage;
    ctx.renderPage = () =>
      originalRenderPage({
        enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
      });

    const styleTags = sheet.getStyleElement();

    const initialProps = await Document.getInitialProps(ctx);

    return { styleTags, ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
 }

 export default MyDocument;
	import Document, { Html, Head, Main, NextScript } from "next/document";
	import { ServerStyleSheet } from "styled-components";

	class MyDocument extends Document {
	static async getInitialProps(ctx) {
	const sheet = new ServerStyleSheet();

	const originalRenderPage = ctx.renderPage;
	ctx.renderPage = () =>
	originalRenderPage({
	enhanceApp: App => props => sheet.collectStyles(<App {...props} />)
	});

	const styleTags = sheet.getStyleElement();

	const initialProps = await Document.getInitialProps(ctx);

	return { styleTags, ...initialProps };
	}

	render() {
	return (
	<Html>
	<Head />
	<body>
	<Main />
	<NextScript />
	</body>
	</Html>
	);
	}
	}

	export default MyDocument;