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