2018-10-03 00:08:57 +02:00
|
|
|
/* eslint-disable */
|
|
|
|
import PropTypes from 'prop-types'
|
2019-04-15 11:26:23 +02:00
|
|
|
import React, { Component } from 'react'
|
2019-03-20 04:53:47 +01:00
|
|
|
import { cleanAmpPath } from 'next-server/dist/server/utils'
|
2019-04-22 19:55:03 +02:00
|
|
|
import { IDocumentContext, IDocumentInitialProps, IDocumentProps } from 'next-server/dist/lib/utils'
|
2019-02-25 23:00:14 +01:00
|
|
|
import { htmlEscapeJsonString } from '../server/htmlescape'
|
2018-10-03 00:08:57 +02:00
|
|
|
import flush from 'styled-jsx/server'
|
2019-02-25 23:00:14 +01:00
|
|
|
import {
|
|
|
|
CLIENT_STATIC_FILES_RUNTIME_AMP,
|
|
|
|
CLIENT_STATIC_FILES_RUNTIME_WEBPACK,
|
|
|
|
} from 'next-server/constants'
|
2018-10-03 00:08:57 +02:00
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
export { IDocumentContext, IDocumentInitialProps, IDocumentProps }
|
|
|
|
|
|
|
|
export interface IOriginProps {
|
|
|
|
nonce?: string
|
|
|
|
crossOrigin?: string
|
|
|
|
}
|
|
|
|
|
|
|
|
export interface IDocumentComponentContext {
|
|
|
|
readonly _documentProps: IDocumentProps
|
|
|
|
readonly _devOnlyInvalidateCacheQueryString: string
|
2019-04-15 11:26:23 +02:00
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
export default class Document extends Component<IDocumentProps> {
|
2018-10-03 00:08:57 +02:00
|
|
|
static childContextTypes = {
|
2019-02-03 01:12:49 +01:00
|
|
|
_documentProps: PropTypes.any,
|
|
|
|
_devOnlyInvalidateCacheQueryString: PropTypes.string,
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
static async getInitialProps({ renderPage }: IDocumentContext): Promise<IDocumentInitialProps> {
|
2019-04-05 12:32:00 +02:00
|
|
|
const { html, head, dataOnly } = await renderPage()
|
2018-10-03 00:08:57 +02:00
|
|
|
const styles = flush()
|
2019-04-05 12:32:00 +02:00
|
|
|
return { html, head, styles, dataOnly }
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
context!: IDocumentComponentContext
|
|
|
|
|
|
|
|
getChildContext(): IDocumentComponentContext {
|
2019-02-03 01:12:49 +01:00
|
|
|
return {
|
|
|
|
_documentProps: this.props,
|
|
|
|
// In dev we invalidate the cache by appending a timestamp to the resource URL.
|
|
|
|
// This is a workaround to fix https://github.com/zeit/next.js/issues/5860
|
|
|
|
// TODO: remove this workaround when https://bugs.webkit.org/show_bug.cgi?id=187726 is fixed.
|
2019-03-01 20:51:13 +01:00
|
|
|
_devOnlyInvalidateCacheQueryString:
|
|
|
|
process.env.NODE_ENV !== 'production' ? '?ts=' + Date.now() : '',
|
2019-02-03 01:12:49 +01:00
|
|
|
}
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
2019-02-20 15:46:29 +01:00
|
|
|
render() {
|
|
|
|
return (
|
|
|
|
<Html>
|
|
|
|
<Head />
|
|
|
|
<body>
|
|
|
|
<Main />
|
|
|
|
<NextScript />
|
|
|
|
</body>
|
|
|
|
</Html>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class Html extends Component {
|
|
|
|
static contextTypes = {
|
|
|
|
_documentProps: PropTypes.any,
|
|
|
|
}
|
|
|
|
|
|
|
|
static propTypes = {
|
|
|
|
children: PropTypes.node.isRequired,
|
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
context!: IDocumentComponentContext
|
|
|
|
|
2019-02-20 15:46:29 +01:00
|
|
|
render() {
|
|
|
|
const { amphtml } = this.context._documentProps
|
2019-02-21 00:42:53 +01:00
|
|
|
return (
|
2019-04-22 19:55:03 +02:00
|
|
|
<html {...this.props} amp={amphtml ? '' : undefined}/>
|
2019-02-21 00:42:53 +01:00
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
export class Head extends Component<IOriginProps> {
|
2018-10-03 00:08:57 +02:00
|
|
|
static contextTypes = {
|
2019-02-03 01:12:49 +01:00
|
|
|
_documentProps: PropTypes.any,
|
|
|
|
_devOnlyInvalidateCacheQueryString: PropTypes.string,
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
static propTypes = {
|
2018-11-13 21:36:09 +01:00
|
|
|
nonce: PropTypes.string,
|
2019-03-01 20:51:13 +01:00
|
|
|
crossOrigin: PropTypes.string,
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
context!: IDocumentComponentContext
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
getCssLinks() {
|
2018-10-03 00:08:57 +02:00
|
|
|
const { assetPrefix, files } = this.context._documentProps
|
2019-03-01 20:51:13 +01:00
|
|
|
if (!files || files.length === 0) {
|
2018-10-03 00:08:57 +02:00
|
|
|
return null
|
|
|
|
}
|
2018-11-01 14:05:39 +01:00
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
return files.map((file) => {
|
2018-10-03 00:08:57 +02:00
|
|
|
// Only render .css files here
|
2019-03-01 20:51:13 +01:00
|
|
|
if (!/\.css$/.exec(file)) {
|
2018-10-03 00:08:57 +02:00
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
<link
|
|
|
|
key={file}
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
rel="stylesheet"
|
|
|
|
href={`${assetPrefix}/_next/${file}`}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
getPreloadDynamicChunks() {
|
2018-10-03 00:08:57 +02:00
|
|
|
const { dynamicImports, assetPrefix } = this.context._documentProps
|
2019-02-03 01:12:49 +01:00
|
|
|
const { _devOnlyInvalidateCacheQueryString } = this.context
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
return dynamicImports.map((bundle) => {
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
<link
|
|
|
|
rel="preload"
|
|
|
|
key={bundle.file}
|
|
|
|
href={`${assetPrefix}/_next/${
|
|
|
|
bundle.file
|
|
|
|
}${_devOnlyInvalidateCacheQueryString}`}
|
|
|
|
as="script"
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
getPreloadMainLinks() {
|
2018-10-03 00:08:57 +02:00
|
|
|
const { assetPrefix, files } = this.context._documentProps
|
2019-02-03 01:12:49 +01:00
|
|
|
if (!files || files.length === 0) {
|
2018-10-03 00:08:57 +02:00
|
|
|
return null
|
|
|
|
}
|
2019-02-03 01:12:49 +01:00
|
|
|
const { _devOnlyInvalidateCacheQueryString } = this.context
|
2018-11-01 14:05:39 +01:00
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
return files.map((file) => {
|
2018-10-03 00:08:57 +02:00
|
|
|
// Only render .js files here
|
2019-03-01 20:51:13 +01:00
|
|
|
if (!/\.js$/.exec(file)) {
|
2018-10-03 00:08:57 +02:00
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
<link
|
|
|
|
key={file}
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
rel="preload"
|
|
|
|
href={`${assetPrefix}/_next/${file}${_devOnlyInvalidateCacheQueryString}`}
|
|
|
|
as="script"
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
styles,
|
|
|
|
amphtml,
|
2019-03-19 20:01:42 +01:00
|
|
|
hasAmp,
|
2019-03-20 04:53:47 +01:00
|
|
|
ampPath,
|
2019-03-01 20:51:13 +01:00
|
|
|
assetPrefix,
|
|
|
|
__NEXT_DATA__,
|
2019-04-15 11:26:23 +02:00
|
|
|
dangerousAsPath,
|
2019-03-01 20:51:13 +01:00
|
|
|
} = this.context._documentProps
|
2019-02-03 01:12:49 +01:00
|
|
|
const { _devOnlyInvalidateCacheQueryString } = this.context
|
2019-04-04 23:54:01 +02:00
|
|
|
const { page, buildId, dynamicBuildId } = __NEXT_DATA__
|
2019-04-02 20:01:34 +02:00
|
|
|
const isDirtyAmp = amphtml && !__NEXT_DATA__.query.amp
|
2018-10-03 00:08:57 +02:00
|
|
|
|
2019-03-18 12:29:31 +01:00
|
|
|
let { head } = this.context._documentProps
|
2018-10-03 00:08:57 +02:00
|
|
|
let children = this.props.children
|
|
|
|
// show a warning if Head contains <title> (only in development)
|
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2019-04-22 19:55:03 +02:00
|
|
|
children = React.Children.map(children, (child: any) => {
|
2018-10-03 00:08:57 +02:00
|
|
|
if (child && child.type === 'title') {
|
2019-03-01 20:51:13 +01:00
|
|
|
console.warn(
|
2019-04-22 19:55:03 +02:00
|
|
|
"Warning: <title> should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-title",
|
2019-03-01 20:51:13 +01:00
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
return child
|
|
|
|
})
|
2019-03-01 20:51:13 +01:00
|
|
|
if (this.props.crossOrigin)
|
|
|
|
console.warn(
|
2019-04-22 19:55:03 +02:00
|
|
|
'Warning: `Head` attribute `crossOrigin` is deprecated. https://err.sh/next.js/doc-crossorigin-deprecated',
|
2019-03-01 20:51:13 +01:00
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
2019-03-18 12:29:31 +01:00
|
|
|
// show warning and remove conflicting amp head tags
|
2019-04-22 19:55:03 +02:00
|
|
|
head = !amphtml ? head : React.Children.map(head || [], (child) => {
|
2019-03-18 12:29:31 +01:00
|
|
|
if (!child) return child
|
|
|
|
const { type, props } = child
|
2019-04-22 19:55:03 +02:00
|
|
|
let badProp: string = ''
|
2019-03-19 00:21:18 +01:00
|
|
|
|
2019-03-18 12:29:31 +01:00
|
|
|
if (type === 'meta' && props.name === 'viewport') {
|
|
|
|
badProp = 'name="viewport"'
|
|
|
|
} else if (type === 'link' && props.rel === 'canonical') {
|
|
|
|
badProp = 'rel="canonical"'
|
2019-04-13 02:04:52 +02:00
|
|
|
} else if (type === 'script') {
|
2019-04-22 17:32:46 +02:00
|
|
|
// only block if
|
2019-04-13 02:04:52 +02:00
|
|
|
// 1. it has a src and isn't pointing to ampproject's CDN
|
|
|
|
// 2. it is using dangerouslySetInnerHTML without a type or
|
|
|
|
// a type of text/javascript
|
|
|
|
if ((props.src && props.src.indexOf('ampproject') < -1) ||
|
|
|
|
(props.dangerouslySetInnerHTML && (!props.type || props.type === 'text/javascript'))
|
|
|
|
) {
|
|
|
|
badProp = '<script'
|
2019-04-22 19:55:03 +02:00
|
|
|
Object.keys(props).forEach((prop) => {
|
2019-04-13 02:04:52 +02:00
|
|
|
badProp += ` ${prop}="${props[prop]}"`
|
|
|
|
})
|
|
|
|
badProp += '/>'
|
|
|
|
}
|
2019-03-18 12:29:31 +01:00
|
|
|
}
|
2019-03-19 00:21:18 +01:00
|
|
|
|
2019-03-18 12:29:31 +01:00
|
|
|
if (badProp) {
|
|
|
|
console.warn(`Found conflicting amp tag "${child.type}" with conflicting prop ${badProp}. https://err.sh/next.js/conflicting-amp-tag`)
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
return child
|
|
|
|
})
|
2019-04-22 17:32:46 +02:00
|
|
|
|
|
|
|
// try to parse styles from fragment for backwards compat
|
2019-04-22 19:55:03 +02:00
|
|
|
const curStyles: React.ReactElement[] = Array.isArray(styles) ? styles : []
|
|
|
|
if (amphtml && styles &&
|
|
|
|
// @ts-ignore Property 'props' does not exist on type ReactElement
|
|
|
|
styles.props && Array.isArray(styles.props.children)
|
2019-04-22 17:32:46 +02:00
|
|
|
) {
|
2019-04-22 19:55:03 +02:00
|
|
|
const hasStyles = (el: React.ReactElement) => (
|
2019-04-22 17:32:46 +02:00
|
|
|
el && el.props &&
|
|
|
|
el.props.dangerouslySetInnerHTML &&
|
|
|
|
el.props.dangerouslySetInnerHTML.__html
|
|
|
|
)
|
2019-04-22 19:55:03 +02:00
|
|
|
// @ts-ignore Property 'props' does not exist on type ReactElement
|
|
|
|
styles.props.children.map((child: React.ReactElement) => {
|
2019-04-22 17:32:46 +02:00
|
|
|
if (Array.isArray(child)) {
|
2019-04-22 19:55:03 +02:00
|
|
|
child.map((el) => hasStyles(el) && curStyles.push(el))
|
2019-04-22 17:32:46 +02:00
|
|
|
} else if (hasStyles(child)) {
|
|
|
|
curStyles.push(child)
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
<head {...this.props}>
|
|
|
|
{children}
|
|
|
|
{head}
|
|
|
|
{amphtml && (
|
|
|
|
<>
|
|
|
|
<meta
|
|
|
|
name="viewport"
|
|
|
|
content="width=device-width,minimum-scale=1,initial-scale=1"
|
|
|
|
/>
|
2019-04-15 11:26:23 +02:00
|
|
|
<link rel="canonical" href={cleanAmpPath(dangerousAsPath)} />
|
|
|
|
{isDirtyAmp && <link rel="amphtml" href={getAmpPath(ampPath, dangerousAsPath)} />}
|
2019-03-01 20:51:13 +01:00
|
|
|
{/* https://www.ampproject.org/docs/fundamentals/optimize_amp#optimize-the-amp-runtime-loading */}
|
|
|
|
<link
|
|
|
|
rel="preload"
|
|
|
|
as="script"
|
|
|
|
href="https://cdn.ampproject.org/v0.js"
|
|
|
|
/>
|
|
|
|
{/* Add custom styles before AMP styles to prevent accidental overrides */}
|
|
|
|
{styles && (
|
|
|
|
<style
|
|
|
|
amp-custom=""
|
|
|
|
dangerouslySetInnerHTML={{
|
2019-04-22 17:32:46 +02:00
|
|
|
__html: curStyles
|
2019-04-22 19:55:03 +02:00
|
|
|
.map((style) => style.props.dangerouslySetInnerHTML.__html)
|
2019-03-15 19:53:02 +01:00
|
|
|
.join('')
|
|
|
|
.replace(/\/\*# sourceMappingURL=.*\*\//g, '')
|
2019-04-22 19:55:03 +02:00
|
|
|
.replace(/\/\*@ sourceURL=.*?\*\//g, ''),
|
2019-03-01 20:51:13 +01:00
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
<style
|
|
|
|
amp-boilerplate=""
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
__html: `body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}`,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
<noscript>
|
|
|
|
<style
|
|
|
|
amp-boilerplate=""
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
__html: `body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}`,
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</noscript>
|
|
|
|
<script async src="https://cdn.ampproject.org/v0.js" />
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
{!amphtml && (
|
|
|
|
<>
|
2019-04-15 11:26:23 +02:00
|
|
|
{hasAmp && <link rel="amphtml" href={getAmpPath(ampPath, dangerousAsPath)} />}
|
2019-03-01 20:51:13 +01:00
|
|
|
{page !== '/_error' && (
|
|
|
|
<link
|
|
|
|
rel="preload"
|
2019-04-04 23:54:01 +02:00
|
|
|
href={
|
|
|
|
assetPrefix +
|
|
|
|
(dynamicBuildId
|
2019-04-07 05:33:31 +02:00
|
|
|
? `/_next/static/client/pages${getPageFile(page, buildId)}`
|
2019-04-04 23:54:01 +02:00
|
|
|
: `/_next/static/${buildId}/pages${getPageFile(page)}`) +
|
|
|
|
_devOnlyInvalidateCacheQueryString
|
|
|
|
}
|
2019-03-01 20:51:13 +01:00
|
|
|
as="script"
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
<link
|
|
|
|
rel="preload"
|
2019-04-04 23:54:01 +02:00
|
|
|
href={
|
|
|
|
assetPrefix +
|
|
|
|
(dynamicBuildId
|
2019-04-07 05:33:31 +02:00
|
|
|
? `/_next/static/client/pages/_app.${buildId}.js`
|
2019-04-04 23:54:01 +02:00
|
|
|
: `/_next/static/${buildId}/pages/_app.js`) +
|
|
|
|
_devOnlyInvalidateCacheQueryString
|
|
|
|
}
|
2019-03-01 20:51:13 +01:00
|
|
|
as="script"
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
{this.getPreloadDynamicChunks()}
|
|
|
|
{this.getPreloadMainLinks()}
|
|
|
|
{this.getCssLinks()}
|
|
|
|
{styles || null}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</head>
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class Main extends Component {
|
|
|
|
static contextTypes = {
|
2019-02-03 01:12:49 +01:00
|
|
|
_documentProps: PropTypes.any,
|
|
|
|
_devOnlyInvalidateCacheQueryString: PropTypes.string,
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
context!: IDocumentComponentContext
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
render() {
|
2018-10-03 00:08:57 +02:00
|
|
|
const { html } = this.context._documentProps
|
2019-03-01 20:51:13 +01:00
|
|
|
return <div id="__next" dangerouslySetInnerHTML={{ __html: html }} />
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
export class NextScript extends Component<IOriginProps> {
|
2018-10-03 00:08:57 +02:00
|
|
|
static contextTypes = {
|
2019-02-03 01:12:49 +01:00
|
|
|
_documentProps: PropTypes.any,
|
|
|
|
_devOnlyInvalidateCacheQueryString: PropTypes.string,
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
static propTypes = {
|
2018-11-13 21:36:09 +01:00
|
|
|
nonce: PropTypes.string,
|
2019-03-01 20:51:13 +01:00
|
|
|
crossOrigin: PropTypes.string,
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
context!: IDocumentComponentContext
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
getDynamicChunks() {
|
2018-10-03 00:08:57 +02:00
|
|
|
const { dynamicImports, assetPrefix } = this.context._documentProps
|
2019-02-03 01:12:49 +01:00
|
|
|
const { _devOnlyInvalidateCacheQueryString } = this.context
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
return dynamicImports.map((bundle) => {
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
<script
|
|
|
|
async
|
|
|
|
key={bundle.file}
|
|
|
|
src={`${assetPrefix}/_next/${
|
|
|
|
bundle.file
|
|
|
|
}${_devOnlyInvalidateCacheQueryString}`}
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
getScripts() {
|
2018-10-03 00:08:57 +02:00
|
|
|
const { assetPrefix, files } = this.context._documentProps
|
2019-02-03 01:12:49 +01:00
|
|
|
if (!files || files.length === 0) {
|
2018-10-03 00:08:57 +02:00
|
|
|
return null
|
|
|
|
}
|
2019-02-03 01:12:49 +01:00
|
|
|
const { _devOnlyInvalidateCacheQueryString } = this.context
|
2018-11-01 14:05:39 +01:00
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
return files.map((file) => {
|
2018-10-03 00:08:57 +02:00
|
|
|
// Only render .js files here
|
2019-03-01 20:51:13 +01:00
|
|
|
if (!/\.js$/.exec(file)) {
|
2018-10-03 00:08:57 +02:00
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
<script
|
|
|
|
key={file}
|
|
|
|
src={`${assetPrefix}/_next/${file}${_devOnlyInvalidateCacheQueryString}`}
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
async
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
})
|
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
static getInlineScriptSource(documentProps: IDocumentProps) {
|
2019-03-01 20:51:13 +01:00
|
|
|
const { __NEXT_DATA__ } = documentProps
|
2019-01-27 16:12:17 +01:00
|
|
|
try {
|
|
|
|
const data = JSON.stringify(__NEXT_DATA__)
|
|
|
|
return htmlEscapeJsonString(data)
|
2019-03-01 20:51:13 +01:00
|
|
|
} catch (err) {
|
|
|
|
if (err.message.indexOf('circular structure')) {
|
|
|
|
throw new Error(
|
|
|
|
`Circular structure in "getInitialProps" result of page "${
|
|
|
|
__NEXT_DATA__.page
|
2019-04-22 19:55:03 +02:00
|
|
|
}". https://err.sh/zeit/next.js/circular-structure`,
|
2019-03-01 20:51:13 +01:00
|
|
|
)
|
2019-01-27 16:12:17 +01:00
|
|
|
}
|
|
|
|
throw err
|
|
|
|
}
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
render() {
|
|
|
|
const {
|
|
|
|
staticMarkup,
|
|
|
|
assetPrefix,
|
|
|
|
amphtml,
|
|
|
|
devFiles,
|
|
|
|
__NEXT_DATA__,
|
|
|
|
} = this.context._documentProps
|
2019-02-03 01:12:49 +01:00
|
|
|
const { _devOnlyInvalidateCacheQueryString } = this.context
|
2019-02-14 16:22:57 +01:00
|
|
|
|
2019-02-25 23:00:14 +01:00
|
|
|
if (amphtml) {
|
|
|
|
if (process.env.NODE_ENV === 'production') {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
|
|
|
const devFiles = [
|
|
|
|
CLIENT_STATIC_FILES_RUNTIME_AMP,
|
|
|
|
CLIENT_STATIC_FILES_RUNTIME_WEBPACK,
|
|
|
|
]
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{staticMarkup ? null : (
|
|
|
|
<script
|
|
|
|
id="__NEXT_DATA__"
|
|
|
|
type="application/json"
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
__html: NextScript.getInlineScriptSource(
|
2019-04-22 19:55:03 +02:00
|
|
|
this.context._documentProps,
|
2019-02-25 23:00:14 +01:00
|
|
|
),
|
|
|
|
}}
|
2019-03-19 00:21:18 +01:00
|
|
|
data-amp-development-mode-only
|
2019-02-25 23:00:14 +01:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{devFiles
|
2019-04-22 19:55:03 +02:00
|
|
|
? devFiles.map((file) => (
|
2019-02-25 23:00:14 +01:00
|
|
|
<script
|
|
|
|
key={file}
|
|
|
|
src={`${assetPrefix}/_next/${file}${_devOnlyInvalidateCacheQueryString}`}
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
2019-03-19 00:21:18 +01:00
|
|
|
data-amp-development-mode-only
|
2019-02-25 23:00:14 +01:00
|
|
|
/>
|
|
|
|
))
|
|
|
|
: null}
|
|
|
|
</>
|
|
|
|
)
|
2019-02-14 16:22:57 +01:00
|
|
|
}
|
|
|
|
|
2019-04-04 23:54:01 +02:00
|
|
|
const { page, buildId, dynamicBuildId } = __NEXT_DATA__
|
2018-10-03 00:08:57 +02:00
|
|
|
|
2018-12-13 01:05:21 +01:00
|
|
|
if (process.env.NODE_ENV !== 'production') {
|
2019-03-01 20:51:13 +01:00
|
|
|
if (this.props.crossOrigin)
|
|
|
|
console.warn(
|
2019-04-22 19:55:03 +02:00
|
|
|
'Warning: `NextScript` attribute `crossOrigin` is deprecated. https://err.sh/next.js/doc-crossorigin-deprecated',
|
2019-03-01 20:51:13 +01:00
|
|
|
)
|
2018-12-13 01:05:21 +01:00
|
|
|
}
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{devFiles
|
2019-04-22 19:55:03 +02:00
|
|
|
? devFiles.map((file) => (
|
2019-03-01 20:51:13 +01:00
|
|
|
<script
|
|
|
|
key={file}
|
|
|
|
src={`${assetPrefix}/_next/${file}${_devOnlyInvalidateCacheQueryString}`}
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
))
|
|
|
|
: null}
|
|
|
|
{staticMarkup ? null : (
|
|
|
|
<script
|
|
|
|
id="__NEXT_DATA__"
|
|
|
|
type="application/json"
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
__html: NextScript.getInlineScriptSource(
|
2019-04-22 19:55:03 +02:00
|
|
|
this.context._documentProps,
|
2019-03-01 20:51:13 +01:00
|
|
|
),
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{page !== '/_error' && (
|
|
|
|
<script
|
|
|
|
async
|
|
|
|
id={`__NEXT_PAGE__${page}`}
|
2019-04-04 23:54:01 +02:00
|
|
|
src={
|
|
|
|
assetPrefix +
|
|
|
|
(dynamicBuildId
|
2019-04-07 05:33:31 +02:00
|
|
|
? `/_next/static/client/pages${getPageFile(page, buildId)}`
|
2019-04-04 23:54:01 +02:00
|
|
|
: `/_next/static/${buildId}/pages${getPageFile(page)}`) +
|
|
|
|
_devOnlyInvalidateCacheQueryString
|
|
|
|
}
|
2019-03-01 20:51:13 +01:00
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
<script
|
|
|
|
async
|
|
|
|
id={`__NEXT_PAGE__/_app`}
|
2019-04-04 23:54:01 +02:00
|
|
|
src={
|
|
|
|
assetPrefix +
|
|
|
|
(dynamicBuildId
|
2019-04-07 05:33:31 +02:00
|
|
|
? `/_next/static/client/pages/_app.${buildId}.js`
|
2019-04-04 23:54:01 +02:00
|
|
|
: `/_next/static/${buildId}/pages/_app.js`) +
|
|
|
|
_devOnlyInvalidateCacheQueryString
|
|
|
|
}
|
2019-03-01 20:51:13 +01:00
|
|
|
nonce={this.props.nonce}
|
|
|
|
crossOrigin={this.props.crossOrigin || process.crossOrigin}
|
|
|
|
/>
|
|
|
|
{staticMarkup ? null : this.getDynamicChunks()}
|
|
|
|
{staticMarkup ? null : this.getScripts()}
|
|
|
|
</>
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-04-22 19:55:03 +02:00
|
|
|
function getAmpPath(ampPath: string, asPath: string) {
|
|
|
|
return ampPath ? ampPath
|
|
|
|
: `${asPath}${asPath.includes('?') ? '&' : '?'}amp=1`
|
|
|
|
}
|
|
|
|
|
|
|
|
function getPageFile(page: string, buildId?: string) {
|
2018-10-10 21:58:15 +02:00
|
|
|
if (page === '/') {
|
2019-04-04 23:54:01 +02:00
|
|
|
return buildId ? `/index.${buildId}.js` : '/index.js'
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
2019-04-04 23:54:01 +02:00
|
|
|
return buildId ? `${page}.${buildId}.js` : `${page}.js`
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|