Server side rendering (SSR) in Next.js with styled-components, styled-jsx, and emotion.

_document.js

import Document, { Head, Main, NextScript } from 'next/document'

import { renderToString } from 'react-dom/server'
import { extractCritical } from 'emotion-server'
import { ServerStyleSheet } from 'styled-components'
import flush from 'styled-jsx/server'

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

    try {
      let emotionStyles
      ctx.renderPage = () => (
        originalRenderPage({
          enhanceApp: App => (
            props => {
              const html = styledComponentsSheet.collectStyles(<App {...props} />)
              emotionStyles = extractCritical(renderToString(html)).css
              return html
            }
          )
        })
      )
      
      const initialProps = await Document.getInitialProps(ctx)
      const styledJSXStyles = flush()

      return {
        ...initialProps,
        styles: (
          <React.Fragment>
            {initialProps.styles}
            <style>{emotionStyles}</style>
            {styledComponentsSheet.getStyleElement()}
            {styledJSXStyles}
          </React.Fragment>
        )
      }
    } finally {
      styledComponentsSheet.seal()
    }
  }
  
  // <snip> 
}

Many thanks for this!

thank you very much ✌️

not work in React 18+Next 12

not work in React 18+Next 12
Yep.. Same problem

not work in React 18+Next 12
Yep.. Same problem

Have you try this? https://gist.github.com/kmvan/c97f0ae04ab59af23b10d0c5745eeb34