import React , { ReactElement } from 'react' ; import Document , { Html , Head , Main , NextScript } from 'next/document' ; import { ServerStyleSheets } from '@material-ui/core/styles' ; import { theme } from '@styles' ; class MyDocument extends Document { render ( ) { return ( < Html lang = "en" > < Head > < link rel = "icon" type = "image/x-icon" href = "/static/favicon.ico" > < /link> < meta name = "theme-color" content = { theme . palette . primary . main } / > < /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 ) ; return { ... initialProps , styles : [ ... React . Children . toArray ( initialProps . styles ) , sheets . getStyleElement ( ) , ] , } ; } ; export default MyDocument ;