import React from 'react' ; import Document , { Html , Head , Main , NextScript } from 'next/document' ; import { ServerStyleSheet } from 'styled-components' ; import theme from '../theme/theme' ; export default class MyDocument extends Document { render ( ) { return ( < Html lang = "en" > < Head > < meta name = "theme-color" content = { theme . palette . primary . main } / > < link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" / > < /Head> < body style = { { backgroundColor : '#1e1e1e' } } > < Main /> < NextScript / > < /body> < /Html>); } } MyDocument . getInitialProps = async ( ctx ) => { const sheet = new ServerStyleSheet ( ) ; const originalRenderPage = ctx . renderPage ; try { ctx . renderPage = ( ) => originalRenderPage ( { enhanceApp : ( App ) => ( props ) => sheet . collectStyles ( < App { ... props } / > ) , } ) ; const initialProps = await Document . getInitialProps ( ctx ) ; return { ... initialProps , styles : ( < React . Fragment > { initialProps . styles } { sheet . getStyleElement ( ) } < /React.Fragment>), } ; } finally { sheet . seal ( ) ; } } ;