tesseract-design
/
kitchen-sink-server


			
				
					
						
						
							
							import NextDocument, {Html, Head as NextHead, Main, NextScript, DocumentContext} from 'next/document';
import * as goober from 'goober';

export default class Document extends NextDocument {
  static async getInitialProps(ctx: DocumentContext) {
    const page = await ctx.renderPage()

    const style = goober.extractCss();
    const initialProps = await NextDocument.getInitialProps(ctx)

    return {
      ...initialProps,
      ...page,
      style,
    }
  }

  render() {
    const { style: rawStyle } = this.props as Record<string, unknown>
    const style = rawStyle as string

    return (
      <Html>
        <NextHead
          className="container mx-auto px-4 block mt-16 md:mt-32"
        >
          <link rel="stylesheet" href="/tailwind-utilities.css" />
          <link rel="stylesheet" href="/global.css" />
          <link rel="stylesheet" href="/theme.css" />
          <link rel="stylesheet" href="/theme/dark.css" />
          {
            style.length > 0
            && (
              <style
                id="_goober_ssr"
                dangerouslySetInnerHTML={{ __html: style }}
              />
            )
          }
        </NextHead>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}