Add experimental id handling (#50470)

x-ref: [slack thread](https://vercel.slack.com/archives/C04TNLL0LSK/p1684879925060159)
vercel · Jun 1, 2023 · 04bbb69 · 04bbb69
1 parent 46d1287
commit 04bbb69
Show file tree

Hide file tree

Showing 25 changed files with 276 additions and 63 deletions.
diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
@@ -251,6 +251,12 @@ export function getDefineEnv({
     'process.env.NEXT_RUNTIME': JSON.stringify(
       isEdgeServer ? 'edge' : isNodeServer ? 'nodejs' : undefined
     ),
+    'process.env.__NEXT_ACTIONS_DEPLOYMENT_ID': JSON.stringify(
+      config.experimental.useDeploymentIdServerActions
+    ),
+    'process.env.__NEXT_DEPLOYMENT_ID': JSON.stringify(
+      config.experimental.deploymentId
+    ),
     'process.env.__NEXT_FETCH_CACHE_KEY_PREFIX':
       JSON.stringify(fetchCacheKeyPrefix),
     'process.env.__NEXT_PREVIEW_MODE_ID': JSON.stringify(previewModeId),

diff --git a/packages/next/src/client/app-index.tsx b/packages/next/src/client/app-index.tsx
@@ -45,7 +45,14 @@ const chunkFilenameMap: any = {}
 
 // eslint-disable-next-line no-undef
 __webpack_require__.u = (chunkId: any) => {
-  return encodeURI(chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId))
+  return (
+    encodeURI(chunkFilenameMap[chunkId] || getChunkScriptFilename(chunkId)) +
+    `${
+      process.env.__NEXT_DEPLOYMENT_ID
+        ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}`
+        : ''
+    }`
+  )
 }
 
 // Ignore the module ID transform in client.

diff --git a/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts b/packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts
@@ -44,6 +44,12 @@ async function fetchServerAction(
       Accept: RSC_CONTENT_TYPE_HEADER,
       'Next-Action': actionId,
       [NEXT_ROUTER_STATE_TREE]: JSON.stringify(state.tree),
+      ...(process.env.__NEXT_ACTIONS_DEPLOYMENT_ID &&
+      process.env.__NEXT_DEPLOYMENT_ID
+        ? {
+            'x-deployment-id': process.env.__NEXT_DEPLOYMENT_ID,
+          }
+        : {}),
       ...(state.nextUrl
         ? {
             [NEXT_URL]: state.nextUrl,

diff --git a/packages/next/src/client/route-loader.ts b/packages/next/src/client/route-loader.ts
@@ -106,6 +106,12 @@ function hasPrefetch(link?: HTMLLinkElement): boolean {
 
 const canPrefetch: boolean = hasPrefetch()
 
+const getAssetQueryString = () => {
+  return process.env.__NEXT_DEPLOYMENT_ID
+    ? `?dpl=${process.env.__NEXT_DEPLOYMENT_ID}`
+    : ''
+}
+
 function prefetchViaDom(
   href: string,
   as: string,
@@ -246,7 +252,8 @@ function getFilesForRoute(
     const scriptUrl =
       assetPrefix +
       '/_next/static/chunks/pages' +
-      encodeURI(getAssetPathFromRoute(route, '.js'))
+      encodeURI(getAssetPathFromRoute(route, '.js')) +
+      getAssetQueryString()
     return Promise.resolve({
       scripts: [__unsafeCreateTrustedScriptURL(scriptUrl)],
       // Styles are handled by `style-loader` in development:
@@ -263,8 +270,10 @@ function getFilesForRoute(
     return {
       scripts: allFiles
         .filter((v) => v.endsWith('.js'))
-        .map((v) => __unsafeCreateTrustedScriptURL(v)),
-      css: allFiles.filter((v) => v.endsWith('.css')),
+        .map((v) => __unsafeCreateTrustedScriptURL(v) + getAssetQueryString()),
+      css: allFiles
+        .filter((v) => v.endsWith('.css'))
+        .map((v) => v + getAssetQueryString()),
     }
   })
 }

diff --git a/packages/next/src/export/index.ts b/packages/next/src/export/index.ts
@@ -493,6 +493,7 @@ export default async function exportApp(
           }
         : {}),
       strictNextHead: !!nextConfig.experimental.strictNextHead,
+      deploymentId: nextConfig.experimental.deploymentId,
     }
 
     const { serverRuntimeConfig, publicRuntimeConfig } = nextConfig

diff --git a/packages/next/src/export/worker.ts b/packages/next/src/export/worker.ts
@@ -119,6 +119,7 @@ interface RenderOpts {
   incrementalCache?: IncrementalCache
   strictNextHead?: boolean
   originalPathname?: string
+  deploymentId?: string
 }
 
 export default async function exportPage({
@@ -155,6 +156,9 @@ export default async function exportPage({
     }
 
     try {
+      if (renderOpts.deploymentId) {
+        process.env.__NEXT_DEPLOYMENT_ID = renderOpts.deploymentId
+      }
       const { query: originalQuery = {} } = pathMap
       const { page } = pathMap
       const pathname = normalizeAppPath(page)

diff --git a/packages/next/src/pages/_document.tsx b/packages/next/src/pages/_document.tsx
@@ -68,7 +68,7 @@ function getPolyfillScripts(context: HtmlProps, props: OriginProps) {
   const {
     assetPrefix,
     buildManifest,
-    devOnlyCacheBusterQueryString,
+    assetQueryString,
     disableOptimizedLoading,
     crossOrigin,
   } = context
@@ -84,7 +84,7 @@ function getPolyfillScripts(context: HtmlProps, props: OriginProps) {
         nonce={props.nonce}
         crossOrigin={props.crossOrigin || crossOrigin}
         noModule={true}
-        src={`${assetPrefix}/_next/${polyfill}${devOnlyCacheBusterQueryString}`}
+        src={`${assetPrefix}/_next/${polyfill}${assetQueryString}`}
       />
     ))
 }
@@ -146,7 +146,7 @@ function getDynamicChunks(
     dynamicImports,
     assetPrefix,
     isDevelopment,
-    devOnlyCacheBusterQueryString,
+    assetQueryString,
     disableOptimizedLoading,
     crossOrigin,
   } = context
@@ -159,9 +159,7 @@ function getDynamicChunks(
         async={!isDevelopment && disableOptimizedLoading}
         defer={!disableOptimizedLoading}
         key={file}
-        src={`${assetPrefix}/_next/${encodeURI(
-          file
-        )}${devOnlyCacheBusterQueryString}`}
+        src={`${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`}
         nonce={props.nonce}
         crossOrigin={props.crossOrigin || crossOrigin}
       />
@@ -178,7 +176,7 @@ function getScripts(
     assetPrefix,
     buildManifest,
     isDevelopment,
-    devOnlyCacheBusterQueryString,
+    assetQueryString,
     disableOptimizedLoading,
     crossOrigin,
   } = context
@@ -192,9 +190,7 @@ function getScripts(
     return (
       <script
         key={file}
-        src={`${assetPrefix}/_next/${encodeURI(
-          file
-        )}${devOnlyCacheBusterQueryString}`}
+        src={`${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`}
         nonce={props.nonce}
         async={!isDevelopment && disableOptimizedLoading}
         defer={!disableOptimizedLoading}
@@ -358,7 +354,8 @@ function getAmpPath(ampPath: string, asPath: string): string {
 function getNextFontLinkTags(
   nextFontManifest: NextFontManifest | undefined,
   dangerousAsPath: string,
-  assetPrefix: string = ''
+  assetPrefix: string = '',
+  assetQueryString: string = ''
 ) {
   if (!nextFontManifest) {
     return {
@@ -381,6 +378,11 @@ function getNextFontLinkTags(
     (appFontsEntry || pageFontsEntry)
   )
 
+  // we only add if the dpl query is present for fonts
+  if (!assetQueryString.includes('dpl=')) {
+    assetQueryString = ''
+  }
+
   return {
     preconnect: preconnectToSelf ? (
       <link
@@ -399,7 +401,9 @@ function getNextFontLinkTags(
             <link
               key={fontFile}
               rel="preload"
-              href={`${assetPrefix}/_next/${encodeURI(fontFile)}`}
+              href={`${assetPrefix}/_next/${encodeURI(
+                fontFile
+              )}${assetQueryString}`}
               as="font"
               type={`font/${ext}`}
               crossOrigin="anonymous"
@@ -425,7 +429,7 @@ export class Head extends React.Component<HeadProps> {
   getCssLinks(files: DocumentFiles): JSX.Element[] | null {
     const {
       assetPrefix,
-      devOnlyCacheBusterQueryString,
+      assetQueryString,
       dynamicImports,
       crossOrigin,
       optimizeCss,
@@ -459,9 +463,7 @@ export class Head extends React.Component<HeadProps> {
             key={`${file}-preload`}
             nonce={this.props.nonce}
             rel="preload"
-            href={`${assetPrefix}/_next/${encodeURI(
-              file
-            )}${devOnlyCacheBusterQueryString}`}
+            href={`${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`}
             as="style"
             crossOrigin={this.props.crossOrigin || crossOrigin}
           />
@@ -474,9 +476,7 @@ export class Head extends React.Component<HeadProps> {
           key={file}
           nonce={this.props.nonce}
           rel="stylesheet"
-          href={`${assetPrefix}/_next/${encodeURI(
-            file
-          )}${devOnlyCacheBusterQueryString}`}
+          href={`${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`}
           crossOrigin={this.props.crossOrigin || crossOrigin}
           data-n-g={isUnmanagedFile ? undefined : isSharedFile ? '' : undefined}
           data-n-p={isUnmanagedFile ? undefined : isSharedFile ? undefined : ''}
@@ -494,12 +494,8 @@ export class Head extends React.Component<HeadProps> {
   }
 
   getPreloadDynamicChunks() {
-    const {
-      dynamicImports,
-      assetPrefix,
-      devOnlyCacheBusterQueryString,
-      crossOrigin,
-    } = this.context
+    const { dynamicImports, assetPrefix, assetQueryString, crossOrigin } =
+      this.context
 
     return (
       dynamicImports
@@ -514,7 +510,7 @@ export class Head extends React.Component<HeadProps> {
               key={file}
               href={`${assetPrefix}/_next/${encodeURI(
                 file
-              )}${devOnlyCacheBusterQueryString}`}
+              )}${assetQueryString}`}
               as="script"
               nonce={this.props.nonce}
               crossOrigin={this.props.crossOrigin || crossOrigin}
@@ -527,12 +523,8 @@ export class Head extends React.Component<HeadProps> {
   }
 
   getPreloadMainLinks(files: DocumentFiles): JSX.Element[] | null {
-    const {
-      assetPrefix,
-      devOnlyCacheBusterQueryString,
-      scriptLoader,
-      crossOrigin,
-    } = this.context
+    const { assetPrefix, assetQueryString, scriptLoader, crossOrigin } =
+      this.context
     const preloadFiles = files.allFiles.filter((file: string) => {
       return file.endsWith('.js')
     })
@@ -553,9 +545,7 @@ export class Head extends React.Component<HeadProps> {
           key={file}
           nonce={this.props.nonce}
           rel="preload"
-          href={`${assetPrefix}/_next/${encodeURI(
-            file
-          )}${devOnlyCacheBusterQueryString}`}
+          href={`${assetPrefix}/_next/${encodeURI(file)}${assetQueryString}`}
           as="script"
           crossOrigin={this.props.crossOrigin || crossOrigin}
         />
@@ -810,7 +800,8 @@ export class Head extends React.Component<HeadProps> {
     const nextFontLinkTags = getNextFontLinkTags(
       nextFontManifest,
       dangerousAsPath,
-      assetPrefix
+      assetPrefix,
+      this.context.assetQueryString
     )
 
     return (
@@ -1073,7 +1064,7 @@ export class NextScript extends React.Component<OriginProps> {
       buildManifest,
       unstable_runtimeJS,
       docComponentsRendered,
-      devOnlyCacheBusterQueryString,
+      assetQueryString,
       disableOptimizedLoading,
       crossOrigin,
     } = this.context
@@ -1108,7 +1099,7 @@ export class NextScript extends React.Component<OriginProps> {
           {ampDevFiles.map((file) => (
             <script
               key={file}
-              src={`${assetPrefix}/_next/${file}${devOnlyCacheBusterQueryString}`}
+              src={`${assetPrefix}/_next/${file}${assetQueryString}`}
               nonce={this.props.nonce}
               crossOrigin={this.props.crossOrigin || crossOrigin}
               data-ampdevmode
@@ -1139,7 +1130,7 @@ export class NextScript extends React.Component<OriginProps> {
                 key={file}
                 src={`${assetPrefix}/_next/${encodeURI(
                   file
-                )}${devOnlyCacheBusterQueryString}`}
+                )}${assetQueryString}`}
                 nonce={this.props.nonce}
                 crossOrigin={this.props.crossOrigin || crossOrigin}
               />