You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.4 KiB
52 lines
1.4 KiB
import { Children } from 'react'; |
|
import Document, { Html, Head, Main, NextScript } from 'next/document'; |
|
import { ServerStyleSheets } from '@material-ui/core/styles'; |
|
|
|
export default class MyDocument extends Document { |
|
render(): JSX.Element { |
|
return ( |
|
<Html lang="en"> |
|
<Head> |
|
<link |
|
rel="stylesheet" |
|
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" |
|
/> |
|
</Head> |
|
<body> |
|
<Main /> |
|
<NextScript /> |
|
</body> |
|
</Html> |
|
); |
|
} |
|
} |
|
|
|
// `getInitialProps` belongs to `_document` (instead of `_app`), |
|
// it's compatible with server-side generation (SSG). |
|
MyDocument.getInitialProps = async (ctx) => { |
|
// Render app and page and get the context of the page with collected side effects. |
|
const sheets = new ServerStyleSheets(); |
|
const originalRenderPage = ctx.renderPage; |
|
|
|
ctx.renderPage = () => |
|
originalRenderPage({ |
|
enhanceApp: (App) => (props) => |
|
sheets.collect( |
|
<App |
|
/* eslint-disable react/jsx-props-no-spreading */ |
|
{...props} |
|
/>, |
|
), |
|
}); |
|
|
|
const initialProps = await Document.getInitialProps(ctx); |
|
|
|
return { |
|
...initialProps, |
|
// Styles fragment is rendered after the app and page rendering finish. |
|
styles: [ |
|
...Children.toArray(initialProps.styles), |
|
sheets.getStyleElement(), |
|
], |
|
}; |
|
};
|
|
|