Permalink
Aug 18, 2017
Jan 27, 2018
Jun 6, 2018
Aug 18, 2017
Aug 18, 2017
Aug 20, 2017
Aug 18, 2017
Aug 18, 2017
Aug 20, 2017
Aug 18, 2017
Sep 7, 2017
Aug 18, 2017
Sep 17, 2017
Aug 18, 2017
Aug 18, 2017
Aug 18, 2017
Jan 1, 2018
Aug 18, 2017
Aug 18, 2017
Aug 18, 2017
Newer
100644
142 lines (133 sloc)
4.74 KB
1
import React from 'react';
2
import Document, { Head, Main, NextScript } from 'next/document';
6
// You can find a benchmark of the available CSS minifiers under
7
// https://github.com/GoalSmashers/css-minification-benchmark
8
// We have found that clean-css is faster than cssnano but the output is larger.
9
// Waiting for https://github.com/cssinjs/jss/issues/279
10
// 4% slower but 12% smaller output than doing it in a single step.
13
let prefixer;
14
let cleanCSS;
15
if (process.env.NODE_ENV === 'production') {
16
const postcss = require('postcss');
17
const autoprefixer = require('autoprefixer');
18
const CleanCSS = require('clean-css');
19
20
prefixer = postcss([autoprefixer]);
21
cleanCSS = new CleanCSS();
22
}
23
24
class MyDocument extends Document {
25
render() {
28
return (
29
<html lang="en" dir="ltr">
30
<Head>
31
<meta
32
name="description"
33
content="React Components that Implement Google's Material Design."
34
/>
35
{/* Use minimum-scale=1 to enable GPU rasterization */}
36
<meta
37
name="viewport"
38
content={
39
'user-scalable=0, initial-scale=1, ' +
40
'minimum-scale=1, width=device-width, height=device-height'
41
}
42
/>
43
{/*
44
manifest.json provides metadata used when your web app is added to the
45
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
46
*/}
47
<link rel="manifest" href="/static/manifest.json" />
48
{/* PWA primary color */}
50
<link
51
rel="stylesheet"
52
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
53
/>
57
<meta name="twitter:site" content="@MaterialUI" />
58
<meta name="twitter:title" content="Material-UI" />
59
<meta
60
name="twitter:description"
61
content="React Components that Implement Google's Material Design."
62
/>
64
{/* Facebook */}
65
<meta property="og:type" content="website" />
66
<meta property="og:title" content="Material-UI" />
67
<meta
68
property="og:description"
69
content="React Components that Implement Google's Material Design."
70
/>
75
</Head>
76
<body>
77
<Main />
78
{/* Global Site Tag (gtag.js) - Google Analytics */}
79
<script async src={`https://www.googletagmanager.com/gtag/js?id=${config.google.id}`} />
80
<script
81
// eslint-disable-next-line react/no-danger
82
dangerouslySetInnerHTML={{
83
__html: `
84
window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments)};
85
gtag('js', new Date());
86
`,
87
}}
88
/>
89
<NextScript />
91
</body>
92
</html>
93
);
94
}
95
}
96
98
// Resolution order
99
//
100
// On the server:
101
// 1. page.getInitialProps
102
// 2. document.getInitialProps
103
// 3. page.render
104
// 4. document.render
105
//
106
// On the server with error:
107
// 2. document.getInitialProps
108
// 3. page.render
109
// 4. document.render
110
//
111
// On the client
112
// 1. page.getInitialProps
113
// 3. page.render
114
115
// Get the context of the page to collected side effects.
116
const pageContext = getPageContext();
128
return {
129
...page,
132
styles: (
133
<style
134
id="jss-server-side"
135
// eslint-disable-next-line react/no-danger
137
/>
138
),
139
};
140
};
141
142
export default MyDocument;