import Document, {
Html,
Head,
Main,
NextScript,
DocumentProps,
DocumentContext,
} from "next/document";
import createEmotionServer from "@emotion/server/create-instance";
import createEmotionCache from "utils/createEmotionCache";
import { EmotionJSX } from "@emotion/react/types/jsx-namespace";
interface MyDocumentProps extends DocumentProps {
emotionStyleTags: EmotionJSX.Element[];
}
export default function MyDocument({ emotionStyleTags }: MyDocumentProps) {
return (
{emotionStyleTags}
);
}
MyDocument.getInitialProps = async (ctx: DocumentContext) => {
const originalRenderPage = ctx.renderPage;
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);
ctx.renderPage = () =>
originalRenderPage({
enhanceApp: (App: any) =>
function EnhanceApp(props) {
return ;
},
});
const initialProps = await Document.getInitialProps(ctx);
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
));
return {
...initialProps,
emotionStyleTags,
};
};