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>
 		);
 	}
 }