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