import Document , { DocumentContext , Head , Html , Main , NextScript , } from 'next/document' ; import * as React from 'react' ; import { ServerStyleSheet } from 'styled-components' ; export default class MyDocument extends Document { static async getInitialProps ( 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 : ( < > { initialProps . styles } { sheet . getStyleElement ( ) } < />), } ; } finally { sheet . seal ( ) ; } } render ( ) { return ( < Html > < Head > < link rel = "preconnect" href = "https://fonts.googleapis.com" / > < link rel = "preconnect" href = "https://fonts.gstatic.com" / > < link href = "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700;900&display=swap" rel = "stylesheet" / > < link rel = "icon" href = "/logo.png" / > < link rel = "apple-touch-icon" href = "/logo.png" / > < link rel = "manifest" href = "/manifest.json" / > < meta property = "og:title" content = "Vova Ushenko" / > < meta name = "author" content = "Vova Ushenko" / > < meta property = "og:locale" content = "en_US" / > < meta name = "description" content = "Vova Ushenko | Full-stack Web Developer | Portfolio" / > < meta property = "og:description" content = "Vova Ushenko | Full-stack Web Developer | Portfolio" / > < meta property = "og:url" content = "https://www.vovacodes.ca/" / > < meta property = "og:site_name" content = "vovacodes" / > < /Head> < body > < Main /> < NextScript / > < /body> < /Html>); } }