import createEmotionServer from '@emotion/server/create-instance'; import { cache } from '@emotion/css'; import Document, { Html, Head, Main, NextScript, DocumentContext, } from 'next/document'; import * as React from 'react'; export const renderStatic = async (html: string) => { if (html === undefined) { throw new Error('did you forget to return html from renderToString?'); } const { extractCritical } = createEmotionServer(cache); const { ids, css } = extractCritical(html); return { html, ids, css }; }; export default class AppDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const page = await ctx.renderPage(); const { css, ids } = await renderStatic(page.html); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( {initialProps.styles}