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