import { Children } from 'react';
import Document, { Head, Html, Main, NextScript } from 'next/document';
import createEmotionServer from '@emotion/server/create-instance';
import { createEmotionCache } from 'src/utils/create-emotion-cache';
const Favicon = () => (
<>
);
const Fonts = () => (
<>
);
class CustomDocument extends Document {
render() {
return (
);
}
}
CustomDocument.getInitialProps = async (ctx) => {
const originalRenderPage = ctx.renderPage;
const cache = createEmotionCache();
const { extractCriticalToChunks } = createEmotionServer(cache);
ctx.renderPage = () => originalRenderPage({
enhanceApp: (App) => (props) => (
)
});
const initialProps = await Document.getInitialProps(ctx);
const emotionStyles = extractCriticalToChunks(initialProps.html);
const emotionStyleTags = emotionStyles.styles.map((style) => (
));
return {
...initialProps,
styles: [...Children.toArray(initialProps.styles), ...emotionStyleTags]
};
};
export default CustomDocument;