| import React from "react"; |
| import Document, { |
| Html, |
| Head, |
| Main, |
| NextScript, |
| DocumentContext, |
| } from "next/document"; |
| import { ServerStyleSheets } from "@material-ui/core/styles"; |
| |
| import theme from "../src/theme"; |
| |
| export default class MyDocument extends Document { |
| static async getInitialProps(ctx: DocumentContext) { |
| const sheets = new ServerStyleSheets(); |
| const originalRenderPage = ctx.renderPage; |
| |
| ctx.renderPage = () => |
| originalRenderPage({ |
| enhanceApp: (App) => (props) => sheets.collect(<App {...props} />), |
| }); |
| |
| const initialProps = await Document.getInitialProps(ctx); |
| |
| return { |
| ...initialProps, |
| // Styles fragment is rendered after the app and page rendering finish. |
| styles: [ |
| ...React.Children.toArray(initialProps.styles), |
| sheets.getStyleElement(), |
| ], |
| }; |
| } |
| |
| render() { |
| return ( |
| <Html lang="en"> |
| <Head> |
| <link |
| rel="stylesheet" |
| href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" |
| /> |
| |
| {/* PWA primary color */} |
| <meta name="theme-color" content={theme.palette.primary.main} /> |
| </Head> |
| <body> |
| <Main /> |
| <NextScript /> |
| </body> |
| </Html> |
| ); |
| } |
| } |
