import Document, {
Html, Head, Main, NextScript
} from 'next/document'
import createEmotionServer from '@emotion/server/create-instance'
import createEmotionCache from '../lib/create-emotion-cache'
export default class MyDocument extends Document {
render() {
return (
{this.props.emotionStyleTags}
)
}
}
MyDocument.getInitialProps = async ctx => {
const originalRenderPage = ctx.renderPage
const cache = createEmotionCache()
const {extractCriticalToChunks} = createEmotionServer(cache)
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App =>
function EnhanceApp(props) { // eslint-disable-line react/function-component-definition
return
},
})
const initialProps = await Document.getInitialProps(ctx)
const emotionStyles = extractCriticalToChunks(initialProps.html)
const emotionStyleTags = emotionStyles.styles.map(style => (
))
return {
...initialProps,
emotionStyleTags
}
}