import React, { Component } from 'react' import PropTypes from 'prop-types' import htmlescape from 'htmlescape' import flush from 'styled-jsx/server' export default class Document extends Component { static getInitialProps ({ renderPage }) { const { html, head, errorHtml } = renderPage() const styles = flush() return { html, head, errorHtml, styles } } static childContextTypes = { _documentProps: PropTypes.any } getChildContext () { return { _documentProps: this.props } } render () { return

} } export class Head extends Component { static contextTypes = { _documentProps: PropTypes.any } getChunkPreloadLink (filename) { const { __NEXT_DATA__ } = this.context._documentProps let { buildStats, assetPrefix } = __NEXT_DATA__ const hash = buildStats ? buildStats[filename].hash : '-' return ( ) } getPreloadMainLinks () { const { dev } = this.context._documentProps if (dev) { return [ this.getChunkPreloadLink('manifest.js'), this.getChunkPreloadLink('commons.js'), this.getChunkPreloadLink('main.js') ] } // In the production mode, we have a single asset with all the JS content. return [ this.getChunkPreloadLink('app.js') ] } render () { const { head, styles, __NEXT_DATA__ } = this.context._documentProps const { pathname, buildId, assetPrefix, nextExport } = __NEXT_DATA__ const pagePathname = getPagePathname(pathname, nextExport) return {this.getPreloadMainLinks()} {(head || []).map((h, i) => React.cloneElement(h, { key: i }))} {styles || null} {this.props.children} } } export class Main extends Component { static contextTypes = { _documentProps: PropTypes.any } render () { const { html, errorHtml } = this.context._documentProps return (

) } } export class NextScript extends Component { static contextTypes = { _documentProps: PropTypes.any } getChunkScript (filename, additionalProps = {}) { const { __NEXT_DATA__ } = this.context._documentProps let { buildStats, assetPrefix } = __NEXT_DATA__ const hash = buildStats ? buildStats[filename].hash : '-' return (