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 <meta property="og:site_name" content="Caroster" />
59 <meta
60 property="og:title"
61 content="Caroster - Covoiturage de groupe"
62 />
63 <meta property="og:url" content="%PUBLIC_URL%" />
64 <meta property="og:type" content="website" />
65 <meta
66 property="og:description"
67 content="Covoiturez à un événement en proposant une voiture ou en prenant une place."
68 />
69 <meta
70 property="og:image"
71 content="/assets/Caroster_Octree_Social.jpg"
72 />
73 <meta property="og:image:width" content="1500" />
74 <meta property="og:image:height" content="843" />
75 <meta itemProp="name" content="Caroster - Covoiturage de groupe" />
76 <meta itemProp="url" content="%PUBLIC_URL%" />
77 <meta
78 itemProp="thumbnailUrl"
79 content="/assets/Caroster_Octree_Social.jpg"
80 />
81 <link rel="image_src" href="/assets/Caroster_Octree_Social.jpg" />
82 <meta itemProp="image" content="/assets/Caroster_Octree_Social.jpg" />
83 <meta
84 name="twitter:title"
85 content="Caroster - Covoiturage de groupe"
86 />
87 <meta
88 name="twitter:image"
89 content="/assets/Caroster_Octree_Social.jpg"
90 />
91 <meta name="twitter:url" content="%PUBLIC_URL%" />
92 <meta name="twitter:card" content="summary" />
93 <meta
94 name="twitter:description"
95 content="Covoiturez à un événement en proposant une voiture ou en prenant une place."
96 />
97 <meta
98 name="description"
99 content="Covoiturez à un événement en proposant une voiture ou en prenant une place."
100 />
101 </Head>
102 <body>
103 <Main />
104 <NextScript />
105 </body>
106 </Html>
107 );
108 }
109}
110
111// `getInitialProps` belongs to `_document` (instead of `_app`),
112// it's compatible with static-site generation (SSG).
113MyDocument.getInitialProps = async ctx => {
114 // Resolution order
115 //
116 // On the server:
117 // 1. app.getInitialProps
118 // 2. page.getInitialProps
119 // 3. document.getInitialProps
120 // 4. app.render
121 // 5. page.render
122 // 6. document.render
123 //
124 // On the server with error:
125 // 1. document.getInitialProps
126 // 2. app.render
127 // 3. page.render
128 // 4. document.render
129 //
130 // On the client
131 // 1. app.getInitialProps
132 // 2. page.getInitialProps
133 // 3. app.render
134 // 4. page.render
135
136 // Render app and page and get the context of the page with collected side effects.
137 const sheets = new ServerStyleSheets();
138 const originalRenderPage = ctx.renderPage;
139 ctx.renderPage = () =>
140 originalRenderPage({
141 enhanceApp: App => props => sheets.collect(<App {...props} />),
142 });
143 const initialProps = await Document.getInitialProps(ctx);
144 return {
145 ...initialProps,
146 // Styles fragment is rendered after the app and page rendering finish.
147 styles: [
148 ...React.Children.toArray(initialProps.styles),
149 sheets.getStyleElement(),
150 ],
151 };
152};