1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-react-helmet/pages/_document.js

57 lines
1.5 KiB
JavaScript
Raw Normal View History

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