2019-11-11 04:24:53 +01:00
|
|
|
import PropTypes from 'prop-types'
|
2020-08-14 16:20:03 +02:00
|
|
|
import React, { Component, ReactNode, useContext } from 'react'
|
2019-11-11 04:24:53 +01:00
|
|
|
import flush from 'styled-jsx/server'
|
2020-07-28 12:19:28 +02:00
|
|
|
import {
|
|
|
|
|
AMP_RENDER_TARGET,
|
|
|
|
|
OPTIMIZED_FONT_PROVIDERS,
|
|
|
|
|
} from '../next-server/lib/constants'
|
2019-11-11 04:24:53 +01:00
|
|
|
import { DocumentContext as DocumentComponentContext } from '../next-server/lib/document-context'
|
|
|
|
|
import {
|
|
|
|
|
DocumentContext,
|
|
|
|
|
DocumentInitialProps,
|
|
|
|
|
DocumentProps,
|
|
|
|
|
} from '../next-server/lib/utils'
|
2020-08-14 16:20:03 +02:00
|
|
|
import {
|
|
|
|
|
BuildManifest,
|
|
|
|
|
getPageFiles,
|
|
|
|
|
} from '../next-server/server/get-page-files'
|
2019-11-11 04:24:53 +01:00
|
|
|
import { cleanAmpPath } from '../next-server/server/utils'
|
|
|
|
|
import { htmlEscapeJsonString } from '../server/htmlescape'
|
2018-10-03 00:08:57 +02:00
|
|
|
|
2019-04-26 09:37:57 +02:00
|
|
|
export { DocumentContext, DocumentInitialProps, DocumentProps }
|
2019-04-22 19:55:03 +02:00
|
|
|
|
2019-04-26 09:37:57 +02:00
|
|
|
export type OriginProps = {
|
2019-04-22 19:55:03 +02:00
|
|
|
nonce?: string
|
2019-05-30 03:19:32 +02:00
|
|
|
crossOrigin?: string
|
2019-04-22 19:55:03 +02:00
|
|
|
}
|
|
|
|
|
|
2020-08-24 07:20:11 +02:00
|
|
|
function dedupe<T extends { file: string }>(bundles: T[]): T[] {
|
|
|
|
|
const files = new Set<string>()
|
|
|
|
|
const kept: T[] = []
|
2019-05-27 03:17:08 +02:00
|
|
|
|
|
|
|
|
for (const bundle of bundles) {
|
|
|
|
|
if (files.has(bundle.file)) continue
|
|
|
|
|
files.add(bundle.file)
|
|
|
|
|
kept.push(bundle)
|
|
|
|
|
}
|
|
|
|
|
return kept
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-10 23:52:30 +02:00
|
|
|
function getOptionalModernScriptVariant(path: string): string {
|
2019-07-25 04:16:32 +02:00
|
|
|
if (process.env.__NEXT_MODERN_BUILD) {
|
|
|
|
|
return path.replace(/\.js$/, '.module.js')
|
|
|
|
|
}
|
|
|
|
|
return path
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
type DocumentFiles = {
|
|
|
|
|
sharedFiles: readonly string[]
|
|
|
|
|
pageFiles: readonly string[]
|
|
|
|
|
allFiles: readonly string[]
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getDocumentFiles(
|
|
|
|
|
buildManifest: BuildManifest,
|
|
|
|
|
pathname: string
|
|
|
|
|
): DocumentFiles {
|
|
|
|
|
const sharedFiles: readonly string[] = getPageFiles(buildManifest, '/_app')
|
2020-10-21 12:11:18 +02:00
|
|
|
const pageFiles: readonly string[] = getPageFiles(buildManifest, pathname)
|
2020-08-14 16:20:03 +02:00
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
sharedFiles,
|
|
|
|
|
pageFiles,
|
|
|
|
|
allFiles: [...new Set([...sharedFiles, ...pageFiles])],
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2019-05-23 21:31:22 +02:00
|
|
|
/**
|
|
|
|
|
* `Document` component handles the initial `document` markup and renders only on the server side.
|
|
|
|
|
* Commonly used for implementing server side rendering for `css-in-js` libraries.
|
|
|
|
|
*/
|
2019-04-29 18:47:40 +02:00
|
|
|
export default class Document<P = {}> extends Component<DocumentProps & P> {
|
2019-11-15 08:33:52 +01:00
|
|
|
static headTagsMiddleware = process.env.__NEXT_PLUGINS
|
|
|
|
|
? import(
|
|
|
|
|
// @ts-ignore loader syntax
|
|
|
|
|
'next-plugin-loader?middleware=document-head-tags-server!'
|
|
|
|
|
)
|
|
|
|
|
: () => []
|
2019-11-01 20:13:13 +01:00
|
|
|
|
2019-05-23 21:31:22 +02:00
|
|
|
/**
|
2019-08-06 13:23:50 +02:00
|
|
|
* `getInitialProps` hook returns the context object with the addition of `renderPage`.
|
2019-05-23 21:31:22 +02:00
|
|
|
* `renderPage` callback executes `React` rendering logic synchronously to support server-rendering wrappers
|
|
|
|
|
*/
|
2019-11-01 20:13:13 +01:00
|
|
|
static async getInitialProps(
|
|
|
|
|
ctx: DocumentContext
|
|
|
|
|
): Promise<DocumentInitialProps> {
|
|
|
|
|
const enhanceApp = (App: any) => {
|
|
|
|
|
return (props: any) => <App {...props} />
|
|
|
|
|
}
|
|
|
|
|
|
2020-01-04 17:40:18 +01:00
|
|
|
const { html, head } = await ctx.renderPage({ enhanceApp })
|
2020-06-29 16:26:49 +02:00
|
|
|
const styles = [...flush()]
|
2020-01-04 17:40:18 +01:00
|
|
|
return { html, head, styles }
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
|
2019-10-14 18:45:56 +02:00
|
|
|
static renderDocument<P>(
|
2020-06-01 23:00:22 +02:00
|
|
|
DocumentComponent: new () => Document<P>,
|
2019-10-14 18:45:56 +02:00
|
|
|
props: DocumentProps & P
|
|
|
|
|
): React.ReactElement {
|
|
|
|
|
return (
|
2020-08-03 16:22:55 +02:00
|
|
|
<DocumentComponentContext.Provider value={props}>
|
2020-06-01 23:00:22 +02:00
|
|
|
<DocumentComponent {...props} />
|
2019-10-14 18:45:56 +02:00
|
|
|
</DocumentComponentContext.Provider>
|
|
|
|
|
)
|
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>
|
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-07 01:00:03 +02:00
|
|
|
export function Html(
|
|
|
|
|
props: React.DetailedHTMLProps<
|
2019-06-06 15:41:31 +02:00
|
|
|
React.HtmlHTMLAttributes<HTMLHtmlElement>,
|
|
|
|
|
HTMLHtmlElement
|
|
|
|
|
>
|
2020-06-07 01:00:03 +02:00
|
|
|
) {
|
2020-10-07 23:11:01 +02:00
|
|
|
const { inAmpMode, docComponentsRendered, locale } = useContext(
|
2020-08-24 04:42:51 +02:00
|
|
|
DocumentComponentContext
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
docComponentsRendered.Html = true
|
|
|
|
|
|
2020-06-07 01:00:03 +02:00
|
|
|
return (
|
|
|
|
|
<html
|
|
|
|
|
{...props}
|
2020-10-07 23:11:01 +02:00
|
|
|
lang={props.lang || locale || undefined}
|
2020-06-07 01:00:03 +02:00
|
|
|
amp={inAmpMode ? '' : undefined}
|
|
|
|
|
data-ampdevmode={
|
|
|
|
|
inAmpMode && process.env.NODE_ENV !== 'production' ? '' : undefined
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
|
2019-06-06 15:41:31 +02:00
|
|
|
export class Head extends Component<
|
|
|
|
|
OriginProps &
|
|
|
|
|
React.DetailedHTMLProps<
|
|
|
|
|
React.HTMLAttributes<HTMLHeadElement>,
|
|
|
|
|
HTMLHeadElement
|
|
|
|
|
>
|
|
|
|
|
> {
|
2019-10-14 18:45:56 +02:00
|
|
|
static contextType = DocumentComponentContext
|
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-10-14 18:45:56 +02:00
|
|
|
context!: React.ContextType<typeof DocumentComponentContext>
|
2019-04-22 19:55:03 +02:00
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
getCssLinks(files: DocumentFiles): JSX.Element[] | null {
|
2020-08-24 07:20:11 +02:00
|
|
|
const {
|
|
|
|
|
assetPrefix,
|
|
|
|
|
devOnlyCacheBusterQueryString,
|
|
|
|
|
dynamicImports,
|
|
|
|
|
} = this.context
|
2020-08-14 16:20:03 +02:00
|
|
|
const cssFiles = files.allFiles.filter((f) => f.endsWith('.css'))
|
2020-11-03 06:23:31 +01:00
|
|
|
const sharedFiles: Set<string> = new Set(files.sharedFiles)
|
2019-10-02 23:47:34 +02:00
|
|
|
|
2020-11-03 06:23:31 +01:00
|
|
|
// Unmanaged files are CSS files that will be handled directly by the
|
|
|
|
|
// webpack runtime (`mini-css-extract-plugin`).
|
|
|
|
|
let unmangedFiles: Set<string> = new Set([])
|
2020-08-24 07:20:11 +02:00
|
|
|
let dynamicCssFiles = dedupe(
|
|
|
|
|
dynamicImports.filter((f) => f.file.endsWith('.css'))
|
|
|
|
|
).map((f) => f.file)
|
|
|
|
|
if (dynamicCssFiles.length) {
|
|
|
|
|
const existing = new Set(cssFiles)
|
|
|
|
|
dynamicCssFiles = dynamicCssFiles.filter(
|
|
|
|
|
(f) => !(existing.has(f) || sharedFiles.has(f))
|
|
|
|
|
)
|
2020-11-03 06:23:31 +01:00
|
|
|
unmangedFiles = new Set(dynamicCssFiles)
|
2020-08-24 07:20:11 +02:00
|
|
|
cssFiles.push(...dynamicCssFiles)
|
|
|
|
|
}
|
|
|
|
|
|
2019-10-16 06:01:11 +02:00
|
|
|
const cssLinkElements: JSX.Element[] = []
|
2020-05-18 21:24:37 +02:00
|
|
|
cssFiles.forEach((file) => {
|
2020-08-17 23:20:05 +02:00
|
|
|
const isSharedFile = sharedFiles.has(file)
|
2020-11-03 06:23:31 +01:00
|
|
|
const isUnmanagedFile = unmangedFiles.has(file)
|
2019-10-16 06:01:11 +02:00
|
|
|
cssLinkElements.push(
|
|
|
|
|
<link
|
2019-11-11 04:24:53 +01:00
|
|
|
key={`${file}-preload`}
|
2019-10-16 06:01:11 +02:00
|
|
|
nonce={this.props.nonce}
|
|
|
|
|
rel="preload"
|
2020-02-22 10:39:36 +01:00
|
|
|
href={`${assetPrefix}/_next/${encodeURI(
|
|
|
|
|
file
|
2020-08-03 16:22:55 +02:00
|
|
|
)}${devOnlyCacheBusterQueryString}`}
|
2019-10-16 06:01:11 +02:00
|
|
|
as="style"
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2019-10-16 06:01:11 +02:00
|
|
|
/>,
|
|
|
|
|
<link
|
|
|
|
|
key={file}
|
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
|
rel="stylesheet"
|
2020-02-22 10:39:36 +01:00
|
|
|
href={`${assetPrefix}/_next/${encodeURI(
|
|
|
|
|
file
|
2020-08-03 16:22:55 +02:00
|
|
|
)}${devOnlyCacheBusterQueryString}`}
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2020-11-03 06:23:31 +01:00
|
|
|
data-n-g={isUnmanagedFile ? undefined : isSharedFile ? '' : undefined}
|
|
|
|
|
data-n-p={isUnmanagedFile ? undefined : isSharedFile ? undefined : ''}
|
2019-10-16 06:01:11 +02:00
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
return cssLinkElements.length === 0 ? null : cssLinkElements
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
getPreloadDynamicChunks() {
|
2020-08-03 16:22:55 +02:00
|
|
|
const {
|
|
|
|
|
dynamicImports,
|
|
|
|
|
assetPrefix,
|
|
|
|
|
devOnlyCacheBusterQueryString,
|
|
|
|
|
} = this.context
|
2019-02-03 01:12:49 +01:00
|
|
|
|
2019-07-25 04:16:32 +02:00
|
|
|
return (
|
|
|
|
|
dedupe(dynamicImports)
|
2020-08-24 07:20:11 +02:00
|
|
|
.map((bundle) => {
|
2019-07-25 18:44:46 +02:00
|
|
|
// `dynamicImports` will contain both `.js` and `.module.js` when the
|
2019-07-25 04:16:32 +02:00
|
|
|
// feature is enabled. This clause will filter down to the modern
|
|
|
|
|
// variants only.
|
|
|
|
|
if (!bundle.file.endsWith(getOptionalModernScriptVariant('.js'))) {
|
|
|
|
|
return null
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<link
|
|
|
|
|
rel="preload"
|
|
|
|
|
key={bundle.file}
|
2019-08-29 18:56:24 +02:00
|
|
|
href={`${assetPrefix}/_next/${encodeURI(
|
2019-07-25 04:16:32 +02:00
|
|
|
bundle.file
|
2020-08-03 16:22:55 +02:00
|
|
|
)}${devOnlyCacheBusterQueryString}`}
|
2019-07-25 04:16:32 +02:00
|
|
|
as="script"
|
|
|
|
|
nonce={this.props.nonce}
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2019-07-25 04:16:32 +02:00
|
|
|
/>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
// Filter out nulled scripts
|
|
|
|
|
.filter(Boolean)
|
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
getPreloadMainLinks(files: DocumentFiles): JSX.Element[] | null {
|
|
|
|
|
const { assetPrefix, devOnlyCacheBusterQueryString } = this.context
|
|
|
|
|
const preloadFiles = files.allFiles.filter((file: string) => {
|
|
|
|
|
// `dynamicImports` will contain both `.js` and `.module.js` when
|
|
|
|
|
// the feature is enabled. This clause will filter down to the
|
|
|
|
|
// modern variants only.
|
|
|
|
|
return file.endsWith(getOptionalModernScriptVariant('.js'))
|
|
|
|
|
})
|
2018-10-03 00:08:57 +02:00
|
|
|
|
2020-05-02 06:52:56 +02:00
|
|
|
return !preloadFiles.length
|
2019-10-16 06:01:11 +02:00
|
|
|
? null
|
2020-05-02 06:52:56 +02:00
|
|
|
: preloadFiles.map((file: string) => (
|
|
|
|
|
<link
|
|
|
|
|
key={file}
|
|
|
|
|
nonce={this.props.nonce}
|
|
|
|
|
rel="preload"
|
|
|
|
|
href={`${assetPrefix}/_next/${encodeURI(
|
|
|
|
|
file
|
2020-08-03 16:22:55 +02:00
|
|
|
)}${devOnlyCacheBusterQueryString}`}
|
2020-05-02 06:52:56 +02:00
|
|
|
as="script"
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2020-05-02 06:52:56 +02:00
|
|
|
/>
|
|
|
|
|
))
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
|
2020-07-28 12:19:28 +02:00
|
|
|
makeStylesheetInert(node: ReactNode): ReactNode {
|
|
|
|
|
return React.Children.map(node, (c: any) => {
|
|
|
|
|
if (
|
|
|
|
|
c.type === 'link' &&
|
|
|
|
|
c.props['href'] &&
|
|
|
|
|
OPTIMIZED_FONT_PROVIDERS.some((url) => c.props['href'].startsWith(url))
|
|
|
|
|
) {
|
|
|
|
|
const newProps = { ...(c.props || {}) }
|
|
|
|
|
newProps['data-href'] = newProps['href']
|
|
|
|
|
newProps['href'] = undefined
|
|
|
|
|
return React.cloneElement(c, newProps)
|
|
|
|
|
} else if (c.props && c.props['children']) {
|
|
|
|
|
c.props['children'] = this.makeStylesheetInert(c.props['children'])
|
|
|
|
|
}
|
|
|
|
|
return c
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
render() {
|
|
|
|
|
const {
|
|
|
|
|
styles,
|
2019-03-20 04:53:47 +01:00
|
|
|
ampPath,
|
2019-06-27 16:22:24 +02:00
|
|
|
inAmpMode,
|
|
|
|
|
hybridAmp,
|
2019-05-29 02:32:18 +02:00
|
|
|
canonicalBase,
|
2019-03-01 20:51:13 +01:00
|
|
|
__NEXT_DATA__,
|
2019-04-15 11:26:23 +02:00
|
|
|
dangerousAsPath,
|
2019-11-01 20:13:13 +01:00
|
|
|
headTags,
|
2020-04-17 11:22:03 +02:00
|
|
|
unstable_runtimeJS,
|
2020-08-03 16:22:55 +02:00
|
|
|
} = this.context
|
2020-04-17 11:22:03 +02:00
|
|
|
const disableRuntimeJS = unstable_runtimeJS === false
|
2018-10-03 00:08:57 +02:00
|
|
|
|
2020-08-24 04:42:51 +02:00
|
|
|
this.context.docComponentsRendered.Head = true
|
|
|
|
|
|
2020-08-03 16:22:55 +02:00
|
|
|
let { head } = this.context
|
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) => {
|
2020-05-02 06:52:56 +02:00
|
|
|
const isReactHelmet = child?.props?.['data-react-helmet']
|
2020-07-07 07:43:16 +02:00
|
|
|
if (!isReactHelmet) {
|
|
|
|
|
if (child?.type === 'title') {
|
|
|
|
|
console.warn(
|
|
|
|
|
"Warning: <title> should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-title"
|
|
|
|
|
)
|
|
|
|
|
} else if (
|
|
|
|
|
child?.type === 'meta' &&
|
|
|
|
|
child?.props?.name === 'viewport'
|
|
|
|
|
) {
|
|
|
|
|
console.warn(
|
|
|
|
|
"Warning: viewport meta tags should not be used in _document.js's <Head>. https://err.sh/next.js/no-document-viewport-meta"
|
|
|
|
|
)
|
|
|
|
|
}
|
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-05-30 03:19:32 +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-05-04 18:46:50 +02:00
|
|
|
|
2020-08-20 21:10:59 +02:00
|
|
|
if (process.env.__NEXT_OPTIMIZE_FONTS && !inAmpMode) {
|
2020-07-28 12:19:28 +02:00
|
|
|
children = this.makeStylesheetInert(children)
|
|
|
|
|
}
|
|
|
|
|
|
2019-07-29 09:18:23 +02:00
|
|
|
let hasAmphtmlRel = false
|
|
|
|
|
let hasCanonicalRel = false
|
|
|
|
|
|
2019-03-18 12:29:31 +01:00
|
|
|
// show warning and remove conflicting amp head tags
|
2020-05-18 21:24:37 +02:00
|
|
|
head = React.Children.map(head || [], (child) => {
|
2019-10-18 17:22:53 +02:00
|
|
|
if (!child) return child
|
|
|
|
|
const { type, props } = child
|
|
|
|
|
if (inAmpMode) {
|
|
|
|
|
let badProp: string = ''
|
|
|
|
|
|
|
|
|
|
if (type === 'meta' && props.name === 'viewport') {
|
|
|
|
|
badProp = 'name="viewport"'
|
|
|
|
|
} else if (type === 'link' && props.rel === 'canonical') {
|
|
|
|
|
hasCanonicalRel = true
|
|
|
|
|
} else if (type === 'script') {
|
|
|
|
|
// only block if
|
|
|
|
|
// 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'
|
2020-05-18 21:24:37 +02:00
|
|
|
Object.keys(props).forEach((prop) => {
|
2019-10-18 17:22:53 +02:00
|
|
|
badProp += ` ${prop}="${props[prop]}"`
|
|
|
|
|
})
|
|
|
|
|
badProp += '/>'
|
2019-05-30 03:19:32 +02:00
|
|
|
}
|
2019-10-18 17:22:53 +02:00
|
|
|
}
|
2019-03-19 00:21:18 +01:00
|
|
|
|
2019-10-18 17:22:53 +02:00
|
|
|
if (badProp) {
|
|
|
|
|
console.warn(
|
2019-11-11 04:24:53 +01:00
|
|
|
`Found conflicting amp tag "${child.type}" with conflicting prop ${badProp} in ${__NEXT_DATA__.page}. https://err.sh/next.js/conflicting-amp-tag`
|
2019-10-18 17:22:53 +02:00
|
|
|
)
|
|
|
|
|
return null
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// non-amp mode
|
|
|
|
|
if (type === 'link' && props.rel === 'amphtml') {
|
|
|
|
|
hasAmphtmlRel = true
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return child
|
|
|
|
|
})
|
2019-04-22 17:32:46 +02:00
|
|
|
|
|
|
|
|
// try to parse styles from fragment for backwards compat
|
2019-07-10 07:39:07 +02:00
|
|
|
const curStyles: React.ReactElement[] = Array.isArray(styles)
|
|
|
|
|
? (styles as React.ReactElement[])
|
|
|
|
|
: []
|
2019-05-30 03:19:32 +02:00
|
|
|
if (
|
2019-06-27 16:22:24 +02:00
|
|
|
inAmpMode &&
|
2019-05-30 03:19:32 +02:00
|
|
|
styles &&
|
|
|
|
|
// @ts-ignore Property 'props' does not exist on type ReactElement
|
|
|
|
|
styles.props &&
|
2019-04-22 19:55:03 +02:00
|
|
|
// @ts-ignore Property 'props' does not exist on type ReactElement
|
2019-05-30 03:19:32 +02:00
|
|
|
Array.isArray(styles.props.children)
|
2019-04-22 17:32:46 +02:00
|
|
|
) {
|
2019-05-30 03:19:32 +02:00
|
|
|
const hasStyles = (el: React.ReactElement) =>
|
2020-05-02 06:52:56 +02:00
|
|
|
el?.props?.dangerouslySetInnerHTML?.__html
|
2019-04-22 19:55:03 +02:00
|
|
|
// @ts-ignore Property 'props' does not exist on type ReactElement
|
2019-11-11 04:24:53 +01:00
|
|
|
styles.props.children.forEach((child: React.ReactElement) => {
|
2019-04-22 17:32:46 +02:00
|
|
|
if (Array.isArray(child)) {
|
2020-05-18 21:24:37 +02:00
|
|
|
child.forEach((el) => hasStyles(el) && curStyles.push(el))
|
2019-04-22 17:32:46 +02:00
|
|
|
} else if (hasStyles(child)) {
|
|
|
|
|
curStyles.push(child)
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
const files: DocumentFiles = getDocumentFiles(
|
|
|
|
|
this.context.buildManifest,
|
|
|
|
|
this.context.__NEXT_DATA__.page
|
|
|
|
|
)
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
|
<head {...this.props}>
|
2020-08-03 16:22:55 +02:00
|
|
|
{this.context.isDevelopment && (
|
2020-04-25 21:00:41 +02:00
|
|
|
<>
|
|
|
|
|
<style
|
|
|
|
|
data-next-hide-fouc
|
|
|
|
|
data-ampdevmode={inAmpMode ? 'true' : undefined}
|
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
|
__html: `body{display:none}`,
|
|
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
<noscript
|
|
|
|
|
data-next-hide-fouc
|
|
|
|
|
data-ampdevmode={inAmpMode ? 'true' : undefined}
|
|
|
|
|
>
|
2019-09-17 22:05:20 +02:00
|
|
|
<style
|
|
|
|
|
dangerouslySetInnerHTML={{
|
2020-04-25 21:00:41 +02:00
|
|
|
__html: `body{display:block}`,
|
2019-09-17 22:05:20 +02:00
|
|
|
}}
|
|
|
|
|
/>
|
2020-04-25 21:00:41 +02:00
|
|
|
</noscript>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2019-03-01 20:51:13 +01:00
|
|
|
{children}
|
|
|
|
|
{head}
|
2020-11-10 22:35:47 +01:00
|
|
|
<meta
|
|
|
|
|
name="next-head-count"
|
|
|
|
|
content={React.Children.count(head || []).toString()}
|
|
|
|
|
/>
|
2019-06-27 16:22:24 +02:00
|
|
|
{inAmpMode && (
|
2019-03-01 20:51:13 +01:00
|
|
|
<>
|
|
|
|
|
<meta
|
|
|
|
|
name="viewport"
|
|
|
|
|
content="width=device-width,minimum-scale=1,initial-scale=1"
|
|
|
|
|
/>
|
2019-07-29 09:18:23 +02:00
|
|
|
{!hasCanonicalRel && (
|
|
|
|
|
<link
|
|
|
|
|
rel="canonical"
|
|
|
|
|
href={canonicalBase + cleanAmpPath(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
|
2020-05-18 21:24:37 +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" />
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2019-06-27 16:22:24 +02:00
|
|
|
{!inAmpMode && (
|
2019-03-01 20:51:13 +01:00
|
|
|
<>
|
2019-07-29 09:18:23 +02:00
|
|
|
{!hasAmphtmlRel && hybridAmp && (
|
2019-05-30 03:19:32 +02:00
|
|
|
<link
|
|
|
|
|
rel="amphtml"
|
|
|
|
|
href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
2020-07-28 12:19:28 +02:00
|
|
|
{process.env.__NEXT_OPTIMIZE_FONTS
|
2020-08-14 16:20:03 +02:00
|
|
|
? this.makeStylesheetInert(this.getCssLinks(files))
|
|
|
|
|
: this.getCssLinks(files)}
|
2020-11-13 21:29:16 +01:00
|
|
|
<noscript data-n-css={this.props.nonce ?? ''} />
|
2020-04-17 11:22:03 +02:00
|
|
|
{!disableRuntimeJS && this.getPreloadDynamicChunks()}
|
2020-08-14 16:20:03 +02:00
|
|
|
{!disableRuntimeJS && this.getPreloadMainLinks(files)}
|
2020-08-03 16:22:55 +02:00
|
|
|
{this.context.isDevelopment && (
|
2020-04-25 21:00:41 +02:00
|
|
|
// this element is used to mount development styles so the
|
|
|
|
|
// ordering matches production
|
|
|
|
|
// (by default, style-loader injects at the bottom of <head />)
|
|
|
|
|
<noscript id="__next_css__DO_NOT_USE__" />
|
|
|
|
|
)}
|
2019-03-01 20:51:13 +01:00
|
|
|
{styles || null}
|
|
|
|
|
</>
|
|
|
|
|
)}
|
2019-11-01 20:13:13 +01:00
|
|
|
{React.createElement(React.Fragment, {}, ...(headTags || []))}
|
2019-03-01 20:51:13 +01:00
|
|
|
</head>
|
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-08 20:11:00 +02:00
|
|
|
export function Main() {
|
2020-08-24 04:42:51 +02:00
|
|
|
const { inAmpMode, html, docComponentsRendered } = useContext(
|
|
|
|
|
DocumentComponentContext
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
docComponentsRendered.Main = true
|
|
|
|
|
|
2020-06-08 20:11:00 +02:00
|
|
|
if (inAmpMode) return <>{AMP_RENDER_TARGET}</>
|
|
|
|
|
return <div id="__next" dangerouslySetInnerHTML={{ __html: html }} />
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
|
2019-04-26 09:37:57 +02:00
|
|
|
export class NextScript extends Component<OriginProps> {
|
2019-10-14 18:45:56 +02:00
|
|
|
static contextType = DocumentComponentContext
|
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-10-14 18:45:56 +02:00
|
|
|
context!: React.ContextType<typeof DocumentComponentContext>
|
2019-04-22 19:55:03 +02:00
|
|
|
|
2019-07-25 04:16:32 +02:00
|
|
|
// Source: https://gist.github.com/samthor/64b114e4a4f539915a95b91ffd340acc
|
|
|
|
|
static safariNomoduleFix =
|
|
|
|
|
'!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();'
|
|
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
getDynamicChunks(files: DocumentFiles) {
|
2020-06-10 06:41:59 +02:00
|
|
|
const {
|
|
|
|
|
dynamicImports,
|
|
|
|
|
assetPrefix,
|
|
|
|
|
isDevelopment,
|
2020-08-03 16:22:55 +02:00
|
|
|
devOnlyCacheBusterQueryString,
|
|
|
|
|
} = this.context
|
2019-02-03 01:12:49 +01:00
|
|
|
|
2020-08-24 07:20:11 +02:00
|
|
|
return dedupe(dynamicImports).map((bundle) => {
|
2019-07-25 04:16:32 +02:00
|
|
|
let modernProps = {}
|
|
|
|
|
if (process.env.__NEXT_MODERN_BUILD) {
|
2020-06-08 20:11:00 +02:00
|
|
|
modernProps = bundle.file.endsWith('.module.js')
|
2019-07-25 04:16:32 +02:00
|
|
|
? { type: 'module' }
|
|
|
|
|
: { noModule: true }
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
if (!bundle.file.endsWith('.js') || files.allFiles.includes(bundle.file))
|
2020-06-08 20:11:00 +02:00
|
|
|
return null
|
2019-09-11 23:20:47 +02:00
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
|
<script
|
2020-06-10 06:41:59 +02:00
|
|
|
async={!isDevelopment}
|
2019-03-01 20:51:13 +01:00
|
|
|
key={bundle.file}
|
2019-08-29 18:56:24 +02:00
|
|
|
src={`${assetPrefix}/_next/${encodeURI(
|
2019-03-01 20:51:13 +01:00
|
|
|
bundle.file
|
2020-08-03 16:22:55 +02:00
|
|
|
)}${devOnlyCacheBusterQueryString}`}
|
2019-03-01 20:51:13 +01:00
|
|
|
nonce={this.props.nonce}
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2019-07-25 04:16:32 +02:00
|
|
|
{...modernProps}
|
2019-03-01 20:51:13 +01:00
|
|
|
/>
|
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
getScripts(files: DocumentFiles) {
|
2020-06-10 06:41:59 +02:00
|
|
|
const {
|
|
|
|
|
assetPrefix,
|
|
|
|
|
buildManifest,
|
|
|
|
|
isDevelopment,
|
2020-08-03 16:22:55 +02:00
|
|
|
devOnlyCacheBusterQueryString,
|
|
|
|
|
} = this.context
|
2018-11-01 14:05:39 +01:00
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
const normalScripts = files.allFiles.filter((file) => file.endsWith('.js'))
|
2020-06-07 01:00:03 +02:00
|
|
|
const lowPriorityScripts = buildManifest.lowPriorityFiles?.filter((file) =>
|
2020-02-29 23:09:42 +01:00
|
|
|
file.endsWith('.js')
|
2019-11-11 08:35:17 +01:00
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
|
2020-05-18 21:24:37 +02:00
|
|
|
return [...normalScripts, ...lowPriorityScripts].map((file) => {
|
2019-07-25 04:16:32 +02:00
|
|
|
let modernProps = {}
|
|
|
|
|
if (process.env.__NEXT_MODERN_BUILD) {
|
2019-11-11 08:35:17 +01:00
|
|
|
modernProps = file.endsWith('.module.js')
|
2019-07-25 04:16:32 +02:00
|
|
|
? { type: 'module' }
|
|
|
|
|
: { noModule: true }
|
|
|
|
|
}
|
2020-08-13 14:39:36 +02:00
|
|
|
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
|
<script
|
|
|
|
|
key={file}
|
2019-08-29 18:56:24 +02:00
|
|
|
src={`${assetPrefix}/_next/${encodeURI(
|
|
|
|
|
file
|
2020-08-03 16:22:55 +02:00
|
|
|
)}${devOnlyCacheBusterQueryString}`}
|
2019-03-01 20:51:13 +01:00
|
|
|
nonce={this.props.nonce}
|
2020-06-10 06:41:59 +02:00
|
|
|
async={!isDevelopment}
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2019-07-25 04:16:32 +02:00
|
|
|
{...modernProps}
|
2019-03-01 20:51:13 +01:00
|
|
|
/>
|
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
2019-11-02 02:00:56 +01:00
|
|
|
getPolyfillScripts() {
|
|
|
|
|
// polyfills.js has to be rendered as nomodule without async
|
|
|
|
|
// It also has to be the first script to load
|
2020-08-03 16:22:55 +02:00
|
|
|
const {
|
|
|
|
|
assetPrefix,
|
|
|
|
|
buildManifest,
|
|
|
|
|
devOnlyCacheBusterQueryString,
|
|
|
|
|
} = this.context
|
2019-11-02 02:00:56 +01:00
|
|
|
|
2020-06-07 01:00:03 +02:00
|
|
|
return buildManifest.polyfillFiles
|
2019-12-05 16:59:49 +01:00
|
|
|
.filter(
|
2020-05-18 21:24:37 +02:00
|
|
|
(polyfill) =>
|
2020-06-08 20:11:00 +02:00
|
|
|
polyfill.endsWith('.js') && !polyfill.endsWith('.module.js')
|
2019-12-05 16:59:49 +01:00
|
|
|
)
|
2020-05-18 21:24:37 +02:00
|
|
|
.map((polyfill) => (
|
2019-11-02 02:00:56 +01:00
|
|
|
<script
|
|
|
|
|
key={polyfill}
|
|
|
|
|
nonce={this.props.nonce}
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2019-11-02 02:00:56 +01:00
|
|
|
noModule={true}
|
2020-08-03 16:22:55 +02:00
|
|
|
src={`${assetPrefix}/_next/${polyfill}${devOnlyCacheBusterQueryString}`}
|
2019-11-02 02:00:56 +01:00
|
|
|
/>
|
|
|
|
|
))
|
|
|
|
|
}
|
|
|
|
|
|
2020-11-05 13:03:45 +01:00
|
|
|
static getInlineScriptSource(documentProps: Readonly<DocumentProps>): string {
|
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(
|
2020-05-27 23:51:11 +02:00
|
|
|
`Circular structure in "getInitialProps" result of page "${__NEXT_DATA__.page}". https://err.sh/vercel/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 {
|
|
|
|
|
assetPrefix,
|
2019-06-27 16:22:24 +02:00
|
|
|
inAmpMode,
|
2020-06-07 01:00:03 +02:00
|
|
|
buildManifest,
|
2020-04-17 11:22:03 +02:00
|
|
|
unstable_runtimeJS,
|
2020-08-24 04:42:51 +02:00
|
|
|
docComponentsRendered,
|
2020-08-03 16:22:55 +02:00
|
|
|
devOnlyCacheBusterQueryString,
|
|
|
|
|
} = this.context
|
2020-04-17 11:22:03 +02:00
|
|
|
const disableRuntimeJS = unstable_runtimeJS === false
|
2020-01-06 20:55:08 +01:00
|
|
|
|
2020-08-24 04:42:51 +02:00
|
|
|
docComponentsRendered.NextScript = true
|
|
|
|
|
|
2019-06-27 16:22:24 +02:00
|
|
|
if (inAmpMode) {
|
2019-02-25 23:00:14 +01:00
|
|
|
if (process.env.NODE_ENV === 'production') {
|
|
|
|
|
return null
|
|
|
|
|
}
|
|
|
|
|
|
2020-06-20 21:59:47 +02:00
|
|
|
const ampDevFiles = [
|
|
|
|
|
...buildManifest.devFiles,
|
|
|
|
|
...buildManifest.ampDevFiles,
|
2019-02-25 23:00:14 +01:00
|
|
|
]
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2020-06-07 01:00:03 +02:00
|
|
|
{disableRuntimeJS ? null : (
|
2019-02-25 23:00:14 +01:00
|
|
|
<script
|
|
|
|
|
id="__NEXT_DATA__"
|
|
|
|
|
type="application/json"
|
|
|
|
|
nonce={this.props.nonce}
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2019-02-25 23:00:14 +01:00
|
|
|
dangerouslySetInnerHTML={{
|
2020-08-03 16:22:55 +02:00
|
|
|
__html: NextScript.getInlineScriptSource(this.context),
|
2019-02-25 23:00:14 +01:00
|
|
|
}}
|
2019-09-03 17:11:22 +02:00
|
|
|
data-ampdevmode
|
2019-02-25 23:00:14 +01:00
|
|
|
/>
|
|
|
|
|
)}
|
2020-06-20 21:59:47 +02:00
|
|
|
{ampDevFiles.map((file) => (
|
|
|
|
|
<script
|
|
|
|
|
key={file}
|
2020-08-03 16:22:55 +02:00
|
|
|
src={`${assetPrefix}/_next/${file}${devOnlyCacheBusterQueryString}`}
|
2020-06-20 21:59:47 +02:00
|
|
|
nonce={this.props.nonce}
|
|
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
|
|
|
|
data-ampdevmode
|
|
|
|
|
/>
|
|
|
|
|
))}
|
2019-02-25 23:00:14 +01:00
|
|
|
</>
|
|
|
|
|
)
|
2019-02-14 16:22:57 +01: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-05-30 03:19:32 +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
|
|
|
}
|
|
|
|
|
|
2020-08-14 16:20:03 +02:00
|
|
|
const files: DocumentFiles = getDocumentFiles(
|
|
|
|
|
this.context.buildManifest,
|
|
|
|
|
this.context.__NEXT_DATA__.page
|
|
|
|
|
)
|
2019-03-01 20:51:13 +01:00
|
|
|
return (
|
|
|
|
|
<>
|
2020-06-07 01:00:03 +02:00
|
|
|
{!disableRuntimeJS && buildManifest.devFiles
|
2020-06-08 20:11:00 +02:00
|
|
|
? buildManifest.devFiles.map((file: string) => (
|
|
|
|
|
<script
|
|
|
|
|
key={file}
|
|
|
|
|
src={`${assetPrefix}/_next/${encodeURI(
|
|
|
|
|
file
|
2020-08-03 16:22:55 +02:00
|
|
|
)}${devOnlyCacheBusterQueryString}`}
|
2020-06-08 20:11:00 +02:00
|
|
|
nonce={this.props.nonce}
|
|
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
|
|
|
|
/>
|
|
|
|
|
))
|
2019-03-01 20:51:13 +01:00
|
|
|
: null}
|
2020-06-07 01:00:03 +02:00
|
|
|
{disableRuntimeJS ? null : (
|
2019-03-01 20:51:13 +01:00
|
|
|
<script
|
|
|
|
|
id="__NEXT_DATA__"
|
|
|
|
|
type="application/json"
|
|
|
|
|
nonce={this.props.nonce}
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2019-03-01 20:51:13 +01:00
|
|
|
dangerouslySetInnerHTML={{
|
2020-08-03 16:22:55 +02:00
|
|
|
__html: NextScript.getInlineScriptSource(this.context),
|
2019-03-01 20:51:13 +01:00
|
|
|
}}
|
|
|
|
|
/>
|
|
|
|
|
)}
|
2020-04-17 11:22:03 +02:00
|
|
|
{process.env.__NEXT_MODERN_BUILD && !disableRuntimeJS ? (
|
2019-03-01 20:51:13 +01:00
|
|
|
<script
|
|
|
|
|
nonce={this.props.nonce}
|
2020-06-07 01:00:03 +02:00
|
|
|
crossOrigin={
|
|
|
|
|
this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
|
|
|
|
|
}
|
2019-07-25 04:16:32 +02:00
|
|
|
noModule={true}
|
|
|
|
|
dangerouslySetInnerHTML={{
|
|
|
|
|
__html: NextScript.safariNomoduleFix,
|
|
|
|
|
}}
|
2019-03-01 20:51:13 +01:00
|
|
|
/>
|
2019-07-25 04:16:32 +02:00
|
|
|
) : null}
|
2020-04-17 11:22:03 +02:00
|
|
|
{!disableRuntimeJS && this.getPolyfillScripts()}
|
2020-08-14 16:20:03 +02:00
|
|
|
{disableRuntimeJS ? null : this.getDynamicChunks(files)}
|
|
|
|
|
{disableRuntimeJS ? null : this.getScripts(files)}
|
2019-03-01 20:51:13 +01:00
|
|
|
</>
|
|
|
|
|
)
|
2018-10-03 00:08:57 +02:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2020-05-10 23:52:30 +02:00
|
|
|
function getAmpPath(ampPath: string, asPath: string): string {
|
2020-05-02 06:52:56 +02:00
|
|
|
return ampPath || `${asPath}${asPath.includes('?') ? '&' : '?'}amp=1`
|
2019-04-22 19:55:03 +02:00
|
|
|
}
|
