Stop using environment variables in pages/_document (#31946)

Since #31939 is going to move the `Document` components, we can't rely on `DefinePlugin` to provide environment variables. This PR passes them as render opts instead. We can't just force this to be bundled like e.g. `next/dynamic`, because we use it internally.
vercel · Nov 30, 2021 · 2b5d62d · 2b5d62d
1 parent 12b44e2
commit 2b5d62d
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 80 deletions.
diff --git a/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts b/packages/next/build/webpack/loaders/next-serverless-loader/page-handler.ts
@@ -191,6 +191,10 @@ export function getPageHandler(ctx: ServerlessHandlerCtx) {
           locale: detectedLocale,
           defaultLocale,
           domainLocales: i18n?.domains,
+          optimizeImages: process.env.__NEXT_OPTIMIZE_IMAGES,
+          optimizeCss: process.env.__NEXT_OPTIMIZE_CSS,
+          concurrentFeatures: process.env.__NEXT_CONCURRENT_FEATURES,
+          crossOrigin: process.env.__NEXT_CROSS_ORIGIN,
         },
         options
       )

diff --git a/packages/next/export/index.ts b/packages/next/export/index.ts
@@ -381,6 +381,10 @@ export default async function exportApp(
       // Exported pages do not currently support dynamic HTML.
       supportsDynamicHTML: false,
       concurrentFeatures: nextConfig.experimental.concurrentFeatures,
+      crossOrigin: nextConfig.crossOrigin,
+      optimizeCss: nextConfig.experimental.optimizeCss,
+      optimizeFonts: nextConfig.optimizeFonts,
+      optimizeImages: nextConfig.experimental.optimizeImages,
     }
 
     const { serverRuntimeConfig, publicRuntimeConfig } = nextConfig

diff --git a/packages/next/pages/_document.tsx b/packages/next/pages/_document.tsx
@@ -51,6 +51,7 @@ function getPolyfillScripts(context: HtmlProps, props: OriginProps) {
     buildManifest,
     devOnlyCacheBusterQueryString,
     disableOptimizedLoading,
+    crossOrigin,
   } = context
 
   return buildManifest.polyfillFiles
@@ -62,15 +63,15 @@ function getPolyfillScripts(context: HtmlProps, props: OriginProps) {
         key={polyfill}
         defer={!disableOptimizedLoading}
         nonce={props.nonce}
-        crossOrigin={props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN}
+        crossOrigin={props.crossOrigin || crossOrigin}
         noModule={true}
         src={`${assetPrefix}/_next/${polyfill}${devOnlyCacheBusterQueryString}`}
       />
     ))
 }
 
 function getPreNextScripts(context: HtmlProps, props: OriginProps) {
-  const { scriptLoader, disableOptimizedLoading } = context
+  const { scriptLoader, disableOptimizedLoading, crossOrigin } = context
 
   return (scriptLoader.beforeInteractive || []).map(
     (file: ScriptProps, index: number) => {
@@ -82,7 +83,7 @@ function getPreNextScripts(context: HtmlProps, props: OriginProps) {
           defer={!disableOptimizedLoading}
           nonce={props.nonce}
           data-nscript="beforeInteractive"
-          crossOrigin={props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN}
+          crossOrigin={props.crossOrigin || crossOrigin}
         />
       )
     }
@@ -100,6 +101,7 @@ function getDynamicChunks(
     isDevelopment,
     devOnlyCacheBusterQueryString,
     disableOptimizedLoading,
+    crossOrigin,
   } = context
 
   return dynamicImports.map((file) => {
@@ -114,7 +116,7 @@ function getDynamicChunks(
           file
         )}${devOnlyCacheBusterQueryString}`}
         nonce={props.nonce}
-        crossOrigin={props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN}
+        crossOrigin={props.crossOrigin || crossOrigin}
       />
     )
   })
@@ -131,6 +133,7 @@ function getScripts(
     isDevelopment,
     devOnlyCacheBusterQueryString,
     disableOptimizedLoading,
+    crossOrigin,
   } = context
 
   const normalScripts = files.allFiles.filter((file) => file.endsWith('.js'))
@@ -148,7 +151,7 @@ function getScripts(
         nonce={props.nonce}
         async={!isDevelopment && disableOptimizedLoading}
         defer={!disableOptimizedLoading}
-        crossOrigin={props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN}
+        crossOrigin={props.crossOrigin || crossOrigin}
       />
     )
   })
@@ -258,8 +261,14 @@ export class Head extends Component<
   context!: React.ContextType<typeof HtmlContext>
 
   getCssLinks(files: DocumentFiles): JSX.Element[] | null {
-    const { assetPrefix, devOnlyCacheBusterQueryString, dynamicImports } =
-      this.context
+    const {
+      assetPrefix,
+      devOnlyCacheBusterQueryString,
+      dynamicImports,
+      crossOrigin,
+      optimizeCss,
+      optimizeFonts,
+    } = this.context
     const cssFiles = files.allFiles.filter((f) => f.endsWith('.css'))
     const sharedFiles: Set<string> = new Set(files.sharedFiles)
 
@@ -282,7 +291,7 @@ export class Head extends Component<
     cssFiles.forEach((file) => {
       const isSharedFile = sharedFiles.has(file)
 
-      if (!process.env.__NEXT_OPTIMIZE_CSS) {
+      if (!optimizeCss) {
         cssLinkElements.push(
           <link
             key={`${file}-preload`}
@@ -292,9 +301,7 @@ export class Head extends Component<
               file
             )}${devOnlyCacheBusterQueryString}`}
             as="style"
-            crossOrigin={
-              this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-            }
+            crossOrigin={this.props.crossOrigin || crossOrigin}
           />
         )
       }
@@ -308,19 +315,14 @@ export class Head extends Component<
           href={`${assetPrefix}/_next/${encodeURI(
             file
           )}${devOnlyCacheBusterQueryString}`}
-          crossOrigin={
-            this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-          }
+          crossOrigin={this.props.crossOrigin || crossOrigin}
           data-n-g={isUnmanagedFile ? undefined : isSharedFile ? '' : undefined}
           data-n-p={isUnmanagedFile ? undefined : isSharedFile ? undefined : ''}
         />
       )
     })
 
-    if (
-      process.env.NODE_ENV !== 'development' &&
-      process.env.__NEXT_OPTIMIZE_FONTS
-    ) {
+    if (process.env.NODE_ENV !== 'development' && optimizeFonts) {
       cssLinkElements = this.makeStylesheetInert(
         cssLinkElements
       ) as ReactElement[]
@@ -330,8 +332,12 @@ export class Head extends Component<
   }
 
   getPreloadDynamicChunks() {
-    const { dynamicImports, assetPrefix, devOnlyCacheBusterQueryString } =
-      this.context
+    const {
+      dynamicImports,
+      assetPrefix,
+      devOnlyCacheBusterQueryString,
+      crossOrigin,
+    } = this.context
 
     return (
       dynamicImports
@@ -349,9 +355,7 @@ export class Head extends Component<
               )}${devOnlyCacheBusterQueryString}`}
               as="script"
               nonce={this.props.nonce}
-              crossOrigin={
-                this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-              }
+              crossOrigin={this.props.crossOrigin || crossOrigin}
             />
           )
         })
@@ -361,8 +365,12 @@ export class Head extends Component<
   }
 
   getPreloadMainLinks(files: DocumentFiles): JSX.Element[] | null {
-    const { assetPrefix, devOnlyCacheBusterQueryString, scriptLoader } =
-      this.context
+    const {
+      assetPrefix,
+      devOnlyCacheBusterQueryString,
+      scriptLoader,
+      crossOrigin,
+    } = this.context
     const preloadFiles = files.allFiles.filter((file: string) => {
       return file.endsWith('.js')
     })
@@ -375,9 +383,7 @@ export class Head extends Component<
           rel="preload"
           href={file.src}
           as="script"
-          crossOrigin={
-            this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-          }
+          crossOrigin={this.props.crossOrigin || crossOrigin}
         />
       )),
       ...preloadFiles.map((file: string) => (
@@ -389,9 +395,7 @@ export class Head extends Component<
             file
           )}${devOnlyCacheBusterQueryString}`}
           as="script"
-          crossOrigin={
-            this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-          }
+          crossOrigin={this.props.crossOrigin || crossOrigin}
         />
       )),
     ]
@@ -479,6 +483,10 @@ export class Head extends Component<
       unstable_JsPreload,
       disableOptimizedLoading,
       useMaybeDeferContent,
+      optimizeCss,
+      optimizeFonts,
+      optimizeImages,
+      concurrentFeatures,
     } = this.context
 
     const disableRuntimeJS = unstable_runtimeJS === false
@@ -532,11 +540,7 @@ export class Head extends Component<
         )
     }
 
-    if (
-      process.env.NODE_ENV !== 'development' &&
-      process.env.__NEXT_OPTIMIZE_FONTS &&
-      !inAmpMode
-    ) {
+    if (process.env.NODE_ENV !== 'development' && optimizeFonts && !inAmpMode) {
       children = this.makeStylesheetInert(children)
     }
 
@@ -650,32 +654,29 @@ export class Head extends Component<
 
       return (
         <head {...this.props}>
-          {!process.env.__NEXT_CONCURRENT_FEATURES &&
-            this.context.isDevelopment && (
-              <>
+          {!concurrentFeatures && this.context.isDevelopment && (
+            <>
+              <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}
+              >
                 <style
-                  data-next-hide-fouc
-                  data-ampdevmode={inAmpMode ? 'true' : undefined}
                   dangerouslySetInnerHTML={{
-                    __html: `body{display:none}`,
+                    __html: `body{display:block}`,
                   }}
                 />
-                <noscript
-                  data-next-hide-fouc
-                  data-ampdevmode={inAmpMode ? 'true' : undefined}
-                >
-                  <style
-                    dangerouslySetInnerHTML={{
-                      __html: `body{display:block}`,
-                    }}
-                  />
-                </noscript>
-              </>
-            )}
-          {children}
-          {process.env.__NEXT_OPTIMIZE_FONTS && (
-            <meta name="next-font-preconnect" />
+              </noscript>
+            </>
           )}
+          {children}
+          {optimizeFonts && <meta name="next-font-preconnect" />}
 
           {!isDeferred && getDynamicHeadContent()}
 
@@ -723,13 +724,9 @@ export class Head extends Component<
                   href={canonicalBase + getAmpPath(ampPath, dangerousAsPath)}
                 />
               )}
-              {!process.env.__NEXT_OPTIMIZE_CSS && this.getCssLinks(files)}
-              {!process.env.__NEXT_OPTIMIZE_CSS && (
-                <noscript data-n-css={this.props.nonce ?? ''} />
-              )}
-              {process.env.__NEXT_OPTIMIZE_IMAGES && (
-                <meta name="next-image-preload" />
-              )}
+              {!optimizeCss && this.getCssLinks(files)}
+              {!optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />}
+              {optimizeImages && <meta name="next-image-preload" />}
 
               {!isDeferred && getDynamicScriptPreloads()}
 
@@ -739,10 +736,8 @@ export class Head extends Component<
 
               {!isDeferred && getDynamicScriptContent()}
 
-              {process.env.__NEXT_OPTIMIZE_CSS && this.getCssLinks(files)}
-              {process.env.__NEXT_OPTIMIZE_CSS && (
-                <noscript data-n-css={this.props.nonce ?? ''} />
-              )}
+              {optimizeCss && this.getCssLinks(files)}
+              {optimizeCss && <noscript data-n-css={this.props.nonce ?? ''} />}
               {this.context.isDevelopment && (
                 // this element is used to mount development styles so the
                 // ordering matches production
@@ -835,6 +830,7 @@ export class NextScript extends Component<OriginProps> {
       devOnlyCacheBusterQueryString,
       disableOptimizedLoading,
       useMaybeDeferContent,
+      crossOrigin,
     } = this.context
     const disableRuntimeJS = unstable_runtimeJS === false
 
@@ -857,9 +853,7 @@ export class NextScript extends Component<OriginProps> {
                   id="__NEXT_DATA__"
                   type="application/json"
                   nonce={this.props.nonce}
-                  crossOrigin={
-                    this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-                  }
+                  crossOrigin={this.props.crossOrigin || crossOrigin}
                   dangerouslySetInnerHTML={{
                     __html: NextScript.getInlineScriptSource(this.context),
                   }}
@@ -871,9 +865,7 @@ export class NextScript extends Component<OriginProps> {
                   key={file}
                   src={`${assetPrefix}/_next/${file}${devOnlyCacheBusterQueryString}`}
                   nonce={this.props.nonce}
-                  crossOrigin={
-                    this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-                  }
+                  crossOrigin={this.props.crossOrigin || crossOrigin}
                   data-ampdevmode
                 />
               ))}
@@ -904,9 +896,7 @@ export class NextScript extends Component<OriginProps> {
                       file
                     )}${devOnlyCacheBusterQueryString}`}
                     nonce={this.props.nonce}
-                    crossOrigin={
-                      this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-                    }
+                    crossOrigin={this.props.crossOrigin || crossOrigin}
                   />
                 ))
               : null}
@@ -915,9 +905,7 @@ export class NextScript extends Component<OriginProps> {
                 id="__NEXT_DATA__"
                 type="application/json"
                 nonce={this.props.nonce}
-                crossOrigin={
-                  this.props.crossOrigin || process.env.__NEXT_CROSS_ORIGIN
-                }
+                crossOrigin={this.props.crossOrigin || crossOrigin}
                 dangerouslySetInnerHTML={{
                   __html: NextScript.getInlineScriptSource(this.context),
                 }}

diff --git a/packages/next/server/next-server.ts b/packages/next/server/next-server.ts
@@ -206,6 +206,7 @@ export default class Server {
     domainLocales?: DomainLocale[]
     distDir: string
     concurrentFeatures?: boolean
+    crossOrigin?: string
   }
   private compression?: ExpressMiddleware
   private incrementalCache: IncrementalCache
@@ -275,6 +276,9 @@ export default class Server {
       domainLocales: this.nextConfig.i18n?.domains,
       distDir: this.distDir,
       concurrentFeatures: this.nextConfig.experimental.concurrentFeatures,
+      crossOrigin: this.nextConfig.crossOrigin
+        ? this.nextConfig.crossOrigin
+        : undefined,
     }
 
     // Only the `publicRuntimeConfig` key is exposed to the client side