kmvan · June 2, 2022 02:52 · Jun 2, 2022 · Jun 2, 2022
diff --git a/_document.tsx b/_document.tsx
@@ -1,4 +1,3 @@
-```typescript
 import Document, {
   DocumentContext,
   Head,
@@ -49,5 +48,4 @@ PageDocument.getInitialProps = async (ctx: DocumentContext) => {
   } finally {
     styledComponentsSheet.seal()
   }
-}
-```
+}
diff --git a/_document.tsx b/_document.tsx
@@ -0,0 +1,53 @@
+```typescript
+import Document, {
+  DocumentContext,
+  Head,
+  Html,
+  Main,
+  NextScript,
+} from 'next/document'
+import { CSSProperties, ServerStyleSheet } from 'styled-components'
+import { AppContextProps } from 'YOUR APP CONTEXT'
+interface PageDocumentProps {
+  __NEXT_DATA__: {
+    props: {
+      appProps: AppContextProps
+    }
+  }
+}
+export default function PageDocument({
+  __NEXT_DATA__: {
+    props: { appProps },
+  },
+}: PageDocumentProps) {
+  return (
+    <Html lang={appProps.lang}>
+      <Head />
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  )
+}
+PageDocument.getInitialProps = async (ctx: DocumentContext) => {
+  const styledComponentsSheet = new ServerStyleSheet()
+  const originalRenderPage = ctx.renderPage
+  try {
+    ctx.renderPage = () =>
+      originalRenderPage({
+        enhanceApp: (App) => (props) => {
+          return styledComponentsSheet.collectStyles(<App {...props} />)
+        },
+      })
+    const initialProps = await Document.getInitialProps(ctx)
+    initialProps.styles = [
+      initialProps.styles,
+      styledComponentsSheet.getStyleElement(),
+    ]
+    return initialProps
+  } finally {
+    styledComponentsSheet.seal()
+  }
+}
+```