import * as React from 'react'; import Document, { Head, Main, NextScript, NextDocumentContext, } from 'next/document'; import { extractCritical } from 'emotion-server'; import { ServerStyleSheet } from 'styled-components'; export type Props = { css: any; styleTags: any; __NEXT_DATA__: any; ids: any; }; export default class MyDocument extends Document { static getInitialProps({ renderPage }: NextDocumentContext) { const sheet = new ServerStyleSheet(); const page = renderPage(App => props => sheet.collectStyles(), ); let emotionStyles = {}; if (page.html) { emotionStyles = extractCritical(page.html); } const styledComponentsTags = sheet.getStyleElement(); return { ...page, ...emotionStyles, styleTags: styledComponentsTags }; } constructor(props: Props) { // @ts-ignore super(props); const { __NEXT_DATA__, ids } = props; if (ids) { __NEXT_DATA__.ids = ids; } } render() { // TODO TSFix - these both come back as undefined values at all times? const { css, styleTags } = this.props; return ( {/* eslint-disable-next-line react/no-danger */}