import Document, { Head, Main, NextScript } from 'next/document' import { renderToSheetList } from 'fela-dom' import FelaProvider from '../FelaProvider' import getFelaRenderer from '../getFelaRenderer' export default class MyDocument extends Document { static getInitialProps ({ renderPage }) { const serverRenderer = getFelaRenderer() const page = renderPage(App => props => ( <FelaProvider renderer={serverRenderer}> <App {...props} /> </FelaProvider> )) const sheetList = renderToSheetList(serverRenderer) return { ...page, sheetList } } render () { const styleNodes = this.props.sheetList.map( ({ type, rehydration, support, media, css }) => ( <style dangerouslySetInnerHTML={{ __html: css }} data-fela-rehydration={rehydration} data-fela-support={support} data-fela-type={type} key={`${type}-${media}`} media={media} /> ) ) return ( <html> <Head>{styleNodes}</Head> <body> <Main /> <NextScript /> </body> </html> ) } }