import { ServerStyleSheets } from '@material-ui/styles' ; import Document , { Head , Html , Main , NextScript } from 'next/document' ; import * as React from 'react' ; import { ServerStyleSheet as SCServerStyleSheet } from 'styled-components' ; import { SITE_AUTHOR , SITE_DESCRIPTION , SITE_IMAGE , SITE_NAME , SITE_TITLE , } from '../components/SEO' ; class MyDocument extends Document { render ( ) { return ( < Html lang = "en" dir = "ltr" > < Head > < meta charSet = "utf-8" / > < meta name = "description" content = { SITE_DESCRIPTION } / > < meta name = "author" content = { SITE_AUTHOR } / > < link rel = "shortcut icon" href = "/static/favicon.ico" type = "image/x-icon" / > < link rel = "icon" href = "/static/favicon.ico" type = "image/x-icon" / > { } < meta property = "og:type" content = "website" / > < meta property = "og:site_name" content = { SITE_NAME } / > < meta property = "og:title" content = { SITE_TITLE } / > < meta property = "og:description" content = { SITE_DESCRIPTION } / > < meta property = "og:image" content = { SITE_IMAGE } / > < meta name = "twitter:card" content = "summary_large_image" / > < meta name = "twitter:site" content = { SITE_NAME } / > < meta name = "twitter:title" content = { SITE_TITLE } / > < meta name = "twitter:description" content = { SITE_DESCRIPTION } / > < meta property = "twitter:image" content = { SITE_IMAGE } / > < link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500" / > < link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons" / > < link rel = "stylesheet" href = "/static/styles/main.css" / > < /Head> < body > < Main /> < NextScript / > < /body> < /Html>); } } MyDocument . getInitialProps = async ( ctx ) => { const muiSheets = new ServerStyleSheets ( ) ; const scSheet = new SCServerStyleSheet ( ) ; const originalRenderPage = ctx . renderPage ; ctx . renderPage = ( ) => originalRenderPage ( { enhanceApp : ( App ) => ( props ) => scSheet . collectStyles ( muiSheets . collect ( < App { ... props } / > ) ) , } ) ; const initialProps = await Document . getInitialProps ( ctx ) ; return { ... initialProps , styles : [ < React . Fragment key = "styles" > { initialProps . styles } { muiSheets . getStyleElement ( ) } { scSheet . getStyleElement ( ) } < /React.Fragment>, ] , } ; } ; export default MyDocument ;