2017-03-15 14:23:42 +00:00
|
|
|
import Document, { Head, Main, NextScript } from 'next/document'
|
|
|
|
import Helmet from 'react-helmet'
|
|
|
|
|
|
|
|
export default class extends Document {
|
2017-04-03 04:21:26 +00:00
|
|
|
static async getInitialProps (...args) {
|
|
|
|
const documentProps = await super.getInitialProps(...args)
|
2017-03-15 14:23:42 +00:00
|
|
|
// see https://github.com/nfl/react-helmet#server-usage for more information
|
|
|
|
// 'head' was occupied by 'renderPage().head', we cannot use it
|
2017-07-18 06:03:21 +00:00
|
|
|
return { ...documentProps, helmet: Helmet.renderStatic() }
|
2017-03-15 14:23:42 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
// should render on <html>
|
|
|
|
get helmetHtmlAttrComponents () {
|
|
|
|
return this.props.helmet.htmlAttributes.toComponent()
|
|
|
|
}
|
|
|
|
|
2017-07-18 06:03:21 +00:00
|
|
|
// should render on <body>
|
|
|
|
get helmetBodyAttrComponents () {
|
|
|
|
return this.props.helmet.bodyAttributes.toComponent()
|
|
|
|
}
|
|
|
|
|
2017-03-15 14:23:42 +00:00
|
|
|
// should render on <head>
|
|
|
|
get helmetHeadComponents () {
|
|
|
|
return Object.keys(this.props.helmet)
|
2017-07-18 06:03:21 +00:00
|
|
|
.filter(el => el !== 'htmlAttributes' && el !== 'bodyAttributes')
|
2017-03-15 14:23:42 +00:00
|
|
|
.map(el => this.props.helmet[el].toComponent())
|
|
|
|
}
|
|
|
|
|
|
|
|
get helmetJsx () {
|
|
|
|
return (<Helmet
|
|
|
|
htmlAttributes={{lang: 'en'}}
|
|
|
|
title='Hello next.js!'
|
|
|
|
meta={[
|
2017-09-12 12:55:40 +00:00
|
|
|
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
|
|
|
{ property: 'og:title', content: 'Hello next.js!' }
|
2017-03-15 14:23:42 +00:00
|
|
|
]}
|
|
|
|
/>)
|
|
|
|
}
|
|
|
|
|
|
|
|
render () {
|
|
|
|
return (<html {...this.helmetHtmlAttrComponents}>
|
|
|
|
<Head>
|
|
|
|
{ this.helmetJsx }
|
|
|
|
{ this.helmetHeadComponents }
|
|
|
|
</Head>
|
2017-07-18 06:03:21 +00:00
|
|
|
<body {...this.helmetBodyAttrComponents}>
|
2017-03-15 14:23:42 +00:00
|
|
|
<Main />
|
|
|
|
<NextScript />
|
|
|
|
</body>
|
|
|
|
</html>)
|
|
|
|
}
|
|
|
|
}
|