diff --git a/.babelrc b/.babelrc
index 4722ed5..998d083 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,13 +3,6 @@
"next/babel"
],
"plugins": [
- [
- "styled-components",
- {
- "ssr": true,
- "displayName": true,
- "preprocess": false
- }
- ]
+ ["styled-components", { "ssr": true }]
]
}
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 05a36b0..df7359e 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -5,21 +5,31 @@ import { ServerStyleSheet } from 'styled-components';
import Document, { Html, Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
- // static getInitialProps({ renderPage }) {
- // // Step 1: Create an instance of ServerStyleSheet
- // const sheet = new ServerStyleSheet();
+ static async GetInitialProps(ctx) {
+ const sheet = new ServerStyleSheet();
+ const originalRenderPage = ctx.renderPage;
- // // Step 2: Retrieve styles from components in the page
- // const page = renderPage((App) => (props) =>
- // sheet.collectStyles(),
- // );
+ try {
+ ctx.renderPage = () =>
+ originalRenderPage({
+ enhanceApp: App => props => sheet.collectStyles()
+ });
- // // Step 3: Extract the styles as