Critical CSS support for both styled-components and Emotion in Next.js

_document.js

import Document, { Head, Main, NextScript } from 'next/document'
import { ServerStyleSheet } from 'styled-components'
import { renderToString } from 'react-dom/server'
import { extractCritical } from 'emotion-server'

export default class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const sheet = new ServerStyleSheet();
    const originalRenderPage = ctx.renderPage

    try {
      let emotionCriticalCSS
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: App => (
            props => {
              const styledComponentsData = sheet.collectStyles(<App {...props} />)
              emotionCriticalCSS = extractCritical(renderToString(styledComponentsData)).css

              return styledComponentsData
            }
          )
        })

      const initialProps = await Document.getInitialProps(ctx)

      return {
        ...initialProps,
        styles: (
          <React.Fragment>
            {initialProps.styles}
            <style>{emotionCriticalCSS}</style>
            {sheet.getStyleElement()}
          </React.Fragment>
        )
      }
    } finally {
      sheet.seal()
    }
  }
  
}