// following this tutorial:
// https://dev.to/hajhosein/nextjs-mui-v5-typescript-tutorial-and-starter-3pab
import { Children, Suspense } from 'react'
import Document, { Html, Head, Main, NextScript } from "next/document"
import createEmotionServer from "@emotion/server/create-instance"
import theme from "~/themes/theme-dark"
import createEmotionCache from "~/themes/common/createEmotionCache"
// import ThreeDLinks from "~/components/threed/ThreeDLinks"
import CircularProgress from "@mui/material/CircularProgress"
export default class MyDocument extends Document {
render() {
return (
{/* Emotion Cache */}
{(this.props as any).emotionStyleTags}
{/* PWA primary color */}
{/* Google Fonts -- Text */}
{/* Google Fonts -- Material Icons */}
}>
{/* */}
)
}
}
// `getInitialProps` belongs to `_document` (instead of `_app`),
// it's compatible with static-site generation (SSG).
MyDocument.getInitialProps = async (ctx) => {
// Resolution order
//
// On the server:
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. document.getInitialProps
// 4. app.render
// 5. page.render
// 6. document.render
//
// On the server with error:
// 1. document.getInitialProps
// 2. app.render
// 3. page.render
// 4. document.render
//
// On the client
// 1. app.getInitialProps
// 2. page.getInitialProps
// 3. app.render
// 4. page.render
const originalRenderPage = ctx.renderPage
// You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
// However, be aware that it can have global side effects.
const cache = createEmotionCache()
const { extractCriticalToChunks } = createEmotionServer(cache)
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: any) =>
function EnhanceApp(props) {
return
},
})
const initialProps = await Document.getInitialProps(ctx)
// This is important. It prevents Emotion to render invalid HTML.
// See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
const emotionStyles = extractCriticalToChunks(initialProps.html)
const emotionStyleTags = emotionStyles.styles.map((style) => (
))
return {
...initialProps,
// emotionStyleTags,
// Styles fragment is rendered after the app and page rendering finish.
styles: [
...Children.toArray(initialProps.styles),
...emotionStyleTags,
],
}
}
/* WORKING
import Document, { Html, Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render() {
return (