import * as React from "react" ; import Document , { Html , Head , Main , NextScript } from "next/document" ; import { ServerStyleSheets } from "@material-ui/core/styles" ; import flush from "styled-jsx/server" ; import theme from "styles/theme" ; class MyDocument extends Document { render ( ) { return ( < Html lang = "en" dir = "ltr" > < Head > < meta charSet = "utf-8" / > { } < link rel = "shortcut icon" href = "/favicon.ico" type = "image/x-icon" > < /link> { } < meta name = "theme-color" content = { theme . palette . primary . main } / > < link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500" / > < /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 . Fragment > { sheets . getStyleElement ( ) } { flush ( ) || null } < /React.Fragment>) } ; } ; export default MyDocument ;