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