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