pages/_document.tsx
import React, { ReactElement } from "react"
import { ServerStyleSheet } from "styled-components"
import Document, {
Html,
Head,
Main,
NextScript,
DocumentContext,
} from "next/document"
class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
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(): ReactElement {
return (
<Html lang="en-US">
<Head>
<meta name="description" content="" />
<link href="/site.webmanifest" rel="manifest" />
<link
color="#000000"
href="/icons/safari-pinned-tab.svg"
rel="mask-icon"
/>
<link
rel="preload"
href="/font/families/Staatliches/Staatliches-Regular.woff2"
as="font"
crossOrigin="anonymous"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument