Add server side stylesheet for styled components

2 years ago · 8b29f48094
parent edb7284aa6
commit 8b29f48094
1 changed files with 43 additions and 0 deletions
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@ -0,0 +1,43 @@
+import Document, { DocumentContext, Html, Head, Main, NextScript } from "next/document";
+import React from "react";
+import { ServerStyleSheet } from "styled-components";
+
+
+export default class MyDocument extends Document {
+	static async getInitialProps(ctx: DocumentContext) {
+		const sheet = new ServerStyleSheet();
+		const originalRenderPage = ctx.renderPage;
+
+		try {
+			ctx.renderPage = () =>
+				originalRenderPage({
+					enhanceApp: App => props => sheet.collectStyles(<App {...props} />),
+				});
+
+			const initialProps = await Document.getInitialProps(ctx);
+			return {
+				...initialProps,
+				styles: (
+					<>
+						{initialProps.styles}
+						{sheet.getStyleElement()}
+					</>
+				),
+			};
+		} finally {
+			sheet.seal();
+		}
+	}
+
+	render() {
+		return (
+			<Html>
+				<Head />
+				<body>
+					<Main />
+					<NextScript />
+				</body>
+			</Html>
+		);
+	}
+}