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