import * as React from 'react'; import Document, { DocumentContext, Head, Html, Main, NextScript, } from 'next/document'; import { Provider as StyletronProvider } from 'styletron-react'; import { Server, Sheet } from 'styletron-engine-atomic'; import type { RenderPageResult } from 'next/dist/shared/lib/utils'; import { styletron } from '../styletron'; type Props = RenderPageResult & { stylesheets: Sheet[]; }; export default class CustomDocument extends Document<Props> { static async getInitialProps(ctx: DocumentContext) { const page = ctx.renderPage((App) => (props) => ( <StyletronProvider value={styletron}> <App {...props} /> </StyletronProvider> )); const stylesheets = (styletron as Server).getStylesheets() || []; return { ...page, stylesheets }; } render() { return ( <Html> <Head> {this.props.stylesheets.map((sheet, i) => ( <style className="_styletron_hydrate_" dangerouslySetInnerHTML={{ __html: sheet.css }} media={sheet.attrs.media} data-hydrate={sheet.attrs['data-hydrate']} key={i} /> ))} </Head> <body> <Main /> <NextScript /> </body> </Html> ); } }