materio-mui-react-nextjs-admin-template-free
Version:
Most Powerful & Comprehensive Free MUI React NextJS Admin Dashboard Template built for developers! 🚀
69 lines (61 loc) • 1.94 kB
JavaScript
// ** 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 'src/@core/utils/create-emotion-cache'
class CustomDocument extends Document {
render() {
return (
<Html lang='en'>
<Head>
<link rel='preconnect' href='https://fonts.googleapis.com' />
<link rel='preconnect' href='https://fonts.gstatic.com' />
<link
rel='stylesheet'
href='https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'
/>
<link rel='apple-touch-icon' sizes='180x180' href='/images/apple-touch-icon.png' />
<link rel='shortcut icon' href='/images/favicon.png' />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
CustomDocument.getInitialProps = async ctx => {
const originalRenderPage = ctx.renderPage
const cache = createEmotionCache()
const { extractCriticalToChunks } = createEmotionServer(cache)
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: App => props =>
(
<App
{...props} // @ts-ignore
emotionCache={cache}
/>
)
})
const initialProps = await Document.getInitialProps(ctx)
const emotionStyles = extractCriticalToChunks(initialProps.html)
const emotionStyleTags = emotionStyles.styles.map(style => {
return (
<style
key={style.key}
dangerouslySetInnerHTML={{ __html: style.css }}
data-emotion={`${style.key} ${style.ids.join(' ')}`}
/>
)
})
return {
...initialProps,
styles: [...Children.toArray(initialProps.styles), ...emotionStyleTags]
}
}
export default CustomDocument