import * as React from "react"; import Document, { DocumentContext, DocumentProps, Head, Html, Main, NextScript, } from "next/document"; import createEmotionServer from "@emotion/server/create-instance"; import { AppType } from "next/app"; import theme, { roboto } from "@/lib/theme"; import createEmotionCache from "@/lib/createEmotionCache"; import { MyAppProps } from "./_app"; interface MyDocumentProps extends DocumentProps { emotionStyleTags: JSX.Element[]; } export default function MyDocument({ emotionStyleTags }: MyDocumentProps) { return ( {/* PWA primary color */} {emotionStyleTags}
); } // `getInitialProps` belongs to `_document` (instead of `_app`), // it's compatible with static-site generation (SSG). MyDocument.getInitialProps = async (ctx: DocumentContext) => { // Resolution order // // On the server: // 1. app.getInitialProps // 2. page.getInitialProps // 3. document.getInitialProps // 4. app.render // 5. page.render // 6. document.render // // On the server with error: // 1. document.getInitialProps // 2. app.render // 3. page.render // 4. document.render // // On the client // 1. app.getInitialProps // 2. page.getInitialProps // 3. app.render // 4. page.render const originalRenderPage = ctx.renderPage; // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance. // However, be aware that it can have global side effects. const cache = createEmotionCache(); const { extractCriticalToChunks } = createEmotionServer(cache); ctx.renderPage = () => originalRenderPage({ enhanceApp: (App: React.ComponentType & MyAppProps>) => function EnhanceApp(props) { return ; }, }); const initialProps = await Document.getInitialProps(ctx); // This is important. It prevents Emotion to render invalid HTML. // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153 const emotionStyles = extractCriticalToChunks(initialProps.html); const emotionStyleTags = emotionStyles.styles.map(style => (