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