// ** React Import
import { Children } from 'react'
// ** Next Import
import Document, { Html, Head, Main, NextScript } from 'next/document'
// ** Emotion Imports
import createEmotionServer from '@emotion/server/create-instance'
// ** Utils Imports
import { createEmotionCache } from '~/@core/utils/create-emotion-cache'
class CustomDocument extends Document {
render() {
return (
{/* */}
{/* */}
{/* Google Fonts -- Text
*/}
{/* Google Fonts -- Material Icons
*/}
)
}
}
CustomDocument.getInitialProps = async ctx => {
const originalRenderPage = ctx.renderPage
const cache = createEmotionCache()
const { extractCriticalToChunks } = createEmotionServer(cache)
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props =>
(
)
})
const initialProps = await Document.getInitialProps(ctx)
const emotionStyles = extractCriticalToChunks(initialProps.html)
const emotionStyleTags = emotionStyles.styles.map((style: any) => (
))
return {
...initialProps,
styles: [...Children.toArray(initialProps.styles), ...emotionStyleTags]
}
}
export default CustomDocument