import Document from 'next/document'
import { css } from '../css'

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

    try {
      let extractedStyles
      ctx.renderPage = () => {
        const { styles, result } = css.getStyles(originalRenderPage)
        extractedStyles = styles
        return result
      }

      const initialProps = await Document.getInitialProps(ctx)

      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {extractedStyles.map((content) => (
              <style>{content}</style>
            ))}
          </>
        ),
      }
    } finally {
    }
  }
}

@@ -606,16 +606,23 @@
 (content
+, index
 ) =%3E (%0A 
@@ -640,16 +640,28 @@
   %3Cstyle
+ key=%7Bindex%7D
 %3E%7Bconten

Update _document.js (#14936)