import React from "react"
import Document, { Head, Main, NextScript } from "next/document"
import JssProvider from "react-jss/lib/JssProvider"
import flush from "styled-jsx/server"
import getPageContext from "lib/getPageContext"
import { ServerStyleSheet } from "styled-components"
class MyDocument extends Document {
static async getInitialProps(ctx) {
// Resolution order
//
// On the server:
// 1. page.getInitialProps
// 2. document.getInitialProps
// 3. page.render
// 4. document.render
//
// On the server with error:
// 2. document.getInitialProps
// 3. page.render
// 4. document.render
//
// On the client
// 1. page.getInitialProps
// 3. page.render
// Get the context of the page to collected side effects.
const pageContext = getPageContext()
const sheet = new ServerStyleSheet()
const page = ctx.renderPage(Component => props =>
sheet.collectStyles(
)
)
const styleTags = sheet.getStyleElement()
return {
...page,
pageContext,
styles: (
{flush() || null}
),
styleTags
}
}
render() {
const { props } = this as any
const { pageContext, styleTags } = props
return (
My page
{styleTags}
{/* Use minimum-scale=1 to enable GPU rasterization */}
{/* PWA primary color */}
)
}
}
export default MyDocument