import createEmotionServer from "@emotion/server/create-instance" ; import Document , { Head , Html , Main , NextScript } from "next/document" ; import React from "react" ; import { DARK_BACKGROUND_COLOR , LIGHT_BACKGROUND_COLOR } from "src/components/DarkThemeProvider" ; import getMuiTheme from "../components/getMuiTheme" ; import { cache } from "./_app" ; import { ServerStyleSheets } from "@material-ui/core" ; const { extractCritical } = createEmotionServer ( cache ) ; export default class MyDocument extends Document { render ( ) { const theme = getMuiTheme ( this . props . isDarkTheme ) ; return ( < Html lang = "en" > < Head > { } < meta name = "theme-color" content = { theme . palette . primary . main } / > < link rel = "icon" href = "/favicon.ico" / > < link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" / > < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" / > < /Head> < body > < Main /> < NextScript / > < /body> < /Html>); } } MyDocument . getInitialProps = async ( ctx ) => { const sheets = new ServerStyleSheets ( ) ; const originalRenderPage = ctx . renderPage ; ctx . renderPage = ( ) => originalRenderPage ( { enhanceApp : ( App ) => ( props ) => sheets . collect ( < App { ... props } / > ) } ) ; const initialProps = await Document . getInitialProps ( ctx ) ; const styles = extractCritical ( initialProps . html ) ; const isDarkTheme = false ; return { ... initialProps , styles : [ ... React . Children . toArray ( initialProps . styles ) , sheets . getStyleElement ( ) , < style key = "emotion-style-tag" data - emotion - css = { styles . ids . join ( " " ) } dangerouslySetInnerHTML = { { __html : styles . css } } / > , < style key = "theme-bgcolor" id = "theme-bgcolor" dangerouslySetInnerHTML = { { __html : `body {
    background-color: ${ isDarkTheme ? DARK_BACKGROUND_COLOR : LIGHT_BACKGROUND_COLOR } !important;
}` } } /> ] , isDarkTheme } ; } ;