Brlaney · July 21, 2021 00:05
diff --git a/_document.tsx b/_document.tsx
 import * as React from 'react'
 import Document, { Html, Head, Main, NextScript } from 'next/document'
 import createEmotionServer from '@emotion/server/create-instance'
 import createCache from '@emotion/cache'
 import { CacheProvider } from '@emotion/react'

 function getCache() {
  const cache = createCache({ key: 'css', prepend: true })
  cache.compat = true
  return cache
 }

 export default class CustomDocument extends Document {
  render () {
    return (
      <Html lang='en'>
        <Head />
        <body>
          <Main />
        </body>
        <NextScript />
      </Html>
    )
  }
 }

 CustomDocument.getInitialProps = async (ctx) => {
  const originalRenderPage = ctx.renderPage
  const cache = getCache()
  const { extractCriticalToChunks } = createEmotionServer(cache)

  ctx.renderPage = () =>
    originalRenderPage({
      enhanceComponent: (Component) => (props) =>
        (
          <CacheProvider value={cache}>
            <Component {...props} />
          </CacheProvider>
        ),
    })

  const initialProps = await Document.getInitialProps(ctx)
  const emotionStyles = extractCriticalToChunks(initialProps.html)
  const emotionStyleTags = emotionStyles.styles.map((style) => (
    <style
      data-emotion={`${style.key} ${style.ids.join(' ')}`}
      key={style.key}
      // eslint-disable-next-line react/no-danger
      dangerouslySetInnerHTML={{ __html: style.css }}
    />
  ))

  return {
    ...initialProps,
    styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
  }
 }
	import * as React from 'react'
	import Document, { Html, Head, Main, NextScript } from 'next/document'
	import createEmotionServer from '@emotion/server/create-instance'
	import createCache from '@emotion/cache'
	import { CacheProvider } from '@emotion/react'

	function getCache() {
	const cache = createCache({ key: 'css', prepend: true })
	cache.compat = true
	return cache
	}

	export default class CustomDocument extends Document {
	render () {
	return (
	<Html lang='en'>
	<Head />
	<body>
	<Main />
	</body>
	<NextScript />
	</Html>
	)
	}
	}

	CustomDocument.getInitialProps = async (ctx) => {
	const originalRenderPage = ctx.renderPage
	const cache = getCache()
	const { extractCriticalToChunks } = createEmotionServer(cache)

	ctx.renderPage = () =>
	originalRenderPage({
	enhanceComponent: (Component) => (props) =>
	(
	<CacheProvider value={cache}>
	<Component {...props} />
	</CacheProvider>
	),
	})

	const initialProps = await Document.getInitialProps(ctx)
	const emotionStyles = extractCriticalToChunks(initialProps.html)
	const emotionStyleTags = emotionStyles.styles.map((style) => (
	<style
	data-emotion={`${style.key} ${style.ids.join(' ')}`}
	key={style.key}
	// eslint-disable-next-line react/no-danger
	dangerouslySetInnerHTML={{ __html: style.css }}
	/>
	))

	return {
	...initialProps,
	styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
	}
	}