import Document , { Head , Html , NextScript , Main , DocumentContext , } from "next/document" ; import { ServerStyleSheet } from "styled-components" ; const Page = ( ) => { return ( < Html lang = "en" > < Head > < meta charSet = "UTF-8" / > < title > Hits < /title> < link rel = "apple-touch-icon" sizes = "180x180" href = "/apple-touch-icon.png" / > < link rel = "icon" type = "image/png" sizes = "32x32" href = "/favicon-32x32.png" / > < link rel = "icon" type = "image/png" sizes = "16x16" href = "/favicon-16x16.png" / > < link rel = "manifest" href = "/site.webmanifest" / > < link rel = "mask-icon" href = "/safari-pinned-tab.svg" color = "#9E9E9E" / > < meta name = "msapplication-TileColor" content = "#9E9E9E" / > < meta name = "theme-color" content = "#9E9E9E" / > < meta name = "description" content = "Count your hits!" / > < link rel = "preconnect" href = "https://fonts.googleapis.com" / > < link rel = "preconnect" href = "https://fonts.gstatic.com" / > < link href = "https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel = "stylesheet" / > < /Head> < body > < Main /> < NextScript / > < /body> < /Html>); } ; export default class HitsDocument 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 < Page />; } }