frontend/pages/_document.tsx (view raw)
1import React from 'react';
2import Document, {Html, Head, Main, NextScript} from 'next/document';
3import theme from '../theme';
4import {ServerStyleSheets} from '@mui/styles';
5
6export default class MyDocument extends Document {
7 render() {
8 return (
9 <Html>
10 <Head>
11 <meta name="theme-color" content={theme.palette.primary.main} />
12 <meta name="application-name" content="Caroster" />
13 <link rel="shortcut icon" href="/assets/favicon.ico" />
14 <link rel="preconnect" href="https://fonts.googleapis.com" />
15 <link
16 rel="preconnect"
17 href="https://fonts.gstatic.com"
18 crossOrigin="anonymous"
19 />
20 <link
21 href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap"
22 rel="stylesheet"
23 />
24 <link
25 rel="stylesheet"
26 href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
27 />
28 <meta name="apple-mobile-web-app-capable" content="yes" />
29 <meta
30 name="apple-mobile-web-app-status-bar-style"
31 content="default"
32 />
33 <meta name="apple-mobile-web-app-title" content="Caroster" />
34 <link rel="apple-touch-icon" href="/assets/apple-touch-icon.png" />
35 <link
36 rel="icon"
37 type="image/png"
38 sizes="32x32"
39 href="/assets/favicon-32x32.png"
40 />
41 <link
42 rel="icon"
43 type="image/png"
44 sizes="16x16"
45 href="/assets/favicon-16x16.png"
46 />
47 <link rel="manifest" href="/manifest.json" />
48 <link rel="mask-icon" href="/assets/logo.svg" color="#5bbad5" />
49 </Head>
50 <body>
51 <Main />
52 <NextScript />
53 </body>
54 </Html>
55 );
56 }
57}
58
59// `getInitialProps` belongs to `_document` (instead of `_app`),
60// it's compatible with static-site generation (SSG).
61MyDocument.getInitialProps = async ctx => {
62 // Resolution order
63 //
64 // On the server:
65 // 1. app.getInitialProps
66 // 2. page.getInitialProps
67 // 3. document.getInitialProps
68 // 4. app.render
69 // 5. page.render
70 // 6. document.render
71 //
72 // On the server with error:
73 // 1. document.getInitialProps
74 // 2. app.render
75 // 3. page.render
76 // 4. document.render
77 //
78 // On the client
79 // 1. app.getInitialProps
80 // 2. page.getInitialProps
81 // 3. app.render
82 // 4. page.render
83
84 // Render app and page and get the context of the page with collected side effects.
85 const sheets = new ServerStyleSheets();
86 const originalRenderPage = ctx.renderPage;
87
88 ctx.renderPage = () =>
89 originalRenderPage({
90 enhanceApp: App => props => sheets.collect(<App {...props} />),
91 });
92
93 const initialProps = await Document.getInitialProps(ctx);
94
95 return {
96 ...initialProps,
97 // Styles fragment is rendered after the app and page rendering finish.
98 styles: [
99 ...React.Children.toArray(initialProps.styles),
100 sheets.getStyleElement(),
101 ],
102 };
103};