diff --git a/packages/next/src/build/webpack-config.ts b/packages/next/src/build/webpack-config.ts
index 80516c7703beb7..73acdfd1938f67 100644
--- 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
index 856f21b0d844c8..113268c970b093 100644
--- 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
index 2a5f7e16bead89..27dc7b4cd7a078 100644
--- 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
index 9365e899acfc68..d40b5a8b3fbdd8 100644
--- 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
index 0adfb2019d2a24..6c6fd3a85e458d 100644
--- 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
index 1e82c503a2d0b0..312ff2f0f9f90d 100644
--- 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
index 39198ec196ffb8..48a845299b1098 100644
--- 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}
               />
diff --git a/packages/next/src/server/app-render/app-render.tsx b/packages/next/src/server/app-render/app-render.tsx
index 0d2ad47041fb7b..378db9d5a709a4 100644
--- a/packages/next/src/server/app-render/app-render.tsx
+++ b/packages/next/src/server/app-render/app-render.tsx
@@ -362,6 +362,20 @@ export async function renderToHTMLOrFlight(
 
     const assetPrefix = renderOpts.assetPrefix || ''
 
+    const getAssetQueryString = (addTimestamp: boolean) => {
+      const isDev = process.env.NODE_ENV === 'development'
+      let qs = ''
+
+      if (isDev && addTimestamp) {
+        qs += `?v=${Date.now()}`
+      }
+
+      if (renderOpts.deploymentId) {
+        qs += `${isDev ? '&' : '?'}dpl=${renderOpts.deploymentId}`
+      }
+      return qs
+    }
+
     const createComponentAndStyles = async ({
       filePath,
       getComponent,
@@ -389,9 +403,9 @@ export async function renderToHTMLOrFlight(
             // Because of this, we add a `?v=` query to bypass the cache during
             // development. We need to also make sure that the number is always
             // increasing.
-            const fullHref = `${assetPrefix}/_next/${href}${
-              process.env.NODE_ENV === 'development' ? `?v=${Date.now()}` : ''
-            }`
+            const fullHref = `${assetPrefix}/_next/${href}${getAssetQueryString(
+              true
+            )}`
 
             // `Precedence` is an opt-in signal for React to handle resource
             // loading and deduplication, etc. It's also used as the key to sort
@@ -458,7 +472,9 @@ export async function renderToHTMLOrFlight(
             const fontFilename = preloadedFontFiles[i]
             const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(fontFilename)![1]
             const type = `font/${ext}`
-            const href = `${assetPrefix}/_next/${fontFilename}`
+            const href = `${assetPrefix}/_next/${fontFilename}${getAssetQueryString(
+              false
+            )}`
             ComponentMod.preloadFont(href, type)
           }
         } else {
@@ -481,9 +497,9 @@ export async function renderToHTMLOrFlight(
             // Because of this, we add a `?v=` query to bypass the cache during
             // development. We need to also make sure that the number is always
             // increasing.
-            const fullHref = `${assetPrefix}/_next/${href}${
-              process.env.NODE_ENV === 'development' ? `?v=${Date.now()}` : ''
-            }`
+            const fullHref = `${assetPrefix}/_next/${href}${getAssetQueryString(
+              true
+            )}`
 
             // `Precedence` is an opt-in signal for React to handle resource
             // loading and deduplication, etc. It's also used as the key to sort
@@ -1392,7 +1408,9 @@ export async function renderToHTMLOrFlight(
               polyfill.endsWith('.js') && !polyfill.endsWith('.module.js')
           )
           .map((polyfill) => ({
-            src: `${assetPrefix}/_next/${polyfill}`,
+            src: `${assetPrefix}/_next/${polyfill}${getAssetQueryString(
+              false
+            )}`,
             integrity: subresourceIntegrityManifest?.[polyfill],
           }))
 
@@ -1471,11 +1489,17 @@ export async function renderToHTMLOrFlight(
               bootstrapScripts: [
                 ...(subresourceIntegrityManifest
                   ? buildManifest.rootMainFiles.map((src) => ({
-                      src: `${assetPrefix}/_next/` + src,
+                      src:
+                        `${assetPrefix}/_next/` +
+                        src +
+                        getAssetQueryString(false),
                       integrity: subresourceIntegrityManifest[src],
                     }))
                   : buildManifest.rootMainFiles.map(
-                      (src) => `${assetPrefix}/_next/` + src
+                      (src) =>
+                        `${assetPrefix}/_next/` +
+                        src +
+                        getAssetQueryString(false)
                     )),
               ],
             },
@@ -1547,11 +1571,15 @@ export async function renderToHTMLOrFlight(
               // Include hydration scripts in the HTML
               bootstrapScripts: subresourceIntegrityManifest
                 ? buildManifest.rootMainFiles.map((src) => ({
-                    src: `${assetPrefix}/_next/` + src,
+                    src:
+                      `${assetPrefix}/_next/` +
+                      src +
+                      getAssetQueryString(false),
                     integrity: subresourceIntegrityManifest[src],
                   }))
                 : buildManifest.rootMainFiles.map(
-                    (src) => `${assetPrefix}/_next/` + src
+                    (src) =>
+                      `${assetPrefix}/_next/` + src + getAssetQueryString(false)
                   ),
             },
           })
diff --git a/packages/next/src/server/app-render/types.ts b/packages/next/src/server/app-render/types.ts
index e241dee2a6a477..0108ed7252cd3d 100644
--- a/packages/next/src/server/app-render/types.ts
+++ b/packages/next/src/server/app-render/types.ts
@@ -132,6 +132,7 @@ export type RenderOptsPartial = {
   nextConfigOutput?: 'standalone' | 'export'
   appDirDevErrorLogger?: (err: any) => Promise<void>
   originalPathname?: string
+  deploymentId?: string
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
diff --git a/packages/next/src/server/base-server.ts b/packages/next/src/server/base-server.ts
index 1b496c541d250d..3e80da52dcb573 100644
--- a/packages/next/src/server/base-server.ts
+++ b/packages/next/src/server/base-server.ts
@@ -219,6 +219,7 @@ export default abstract class Server<ServerOptions extends Options = Options> {
   protected readonly buildId: string
   protected readonly minimalMode: boolean
   protected readonly renderOpts: {
+    deploymentId?: string
     poweredByHeader: boolean
     buildId: string
     generateEtags: boolean
@@ -421,7 +422,15 @@ export default abstract class Server<ServerOptions extends Options = Options> {
       : undefined
     this.nextFontManifest = this.getNextFontManifest()
 
+    if (process.env.NEXT_RUNTIME !== 'edge') {
+      if (this.nextConfig.experimental.deploymentId) {
+        process.env.__NEXT_DEPLOYMENT_ID =
+          this.nextConfig.experimental.deploymentId
+      }
+    }
+
     this.renderOpts = {
+      deploymentId: this.nextConfig.experimental.deploymentId,
       strictNextHead: !!this.nextConfig.experimental.strictNextHead,
       poweredByHeader: this.nextConfig.poweredByHeader,
       canonicalBase: this.nextConfig.amp.canonicalBase || '',
diff --git a/packages/next/src/server/config-schema.ts b/packages/next/src/server/config-schema.ts
index f1a27d295b961d..945e5de04189ab 100644
--- a/packages/next/src/server/config-schema.ts
+++ b/packages/next/src/server/config-schema.ts
@@ -270,6 +270,12 @@ const configSchema = {
         craCompat: {
           type: 'boolean',
         },
+        useDeploymentIdServerActions: {
+          type: 'boolean',
+        },
+        deploymentId: {
+          type: 'string',
+        },
         disableOptimizedLoading: {
           type: 'boolean',
         },
diff --git a/packages/next/src/server/config-shared.ts b/packages/next/src/server/config-shared.ts
index 8d3d4ae586f72b..691635f9428a5d 100644
--- a/packages/next/src/server/config-shared.ts
+++ b/packages/next/src/server/config-shared.ts
@@ -144,6 +144,8 @@ export interface NextJsWebpackConfig {
 }
 
 export interface ExperimentalConfig {
+  useDeploymentIdServerActions?: boolean
+  deploymentId?: string
   logging?: 'verbose'
   appDocumentPreloading?: boolean
   strictNextHead?: boolean
@@ -660,6 +662,8 @@ export const defaultConfig: NextConfig = {
   output: !!process.env.NEXT_PRIVATE_STANDALONE ? 'standalone' : undefined,
   modularizeImports: undefined,
   experimental: {
+    useDeploymentIdServerActions: false,
+    deploymentId: process.env.NEXT_DEPLOYMENT_ID || '',
     appDocumentPreloading: undefined,
     clientRouterFilter: false,
     clientRouterFilterRedirects: false,
diff --git a/packages/next/src/server/render-result.ts b/packages/next/src/server/render-result.ts
index 9c27a885968df4..5cfb48070ef445 100644
--- a/packages/next/src/server/render-result.ts
+++ b/packages/next/src/server/render-result.ts
@@ -7,7 +7,7 @@ export type RenderResultMetadata = {
   pageData?: any
   revalidate?: any
   staticBailoutInfo?: any
-  devOnlyCacheBusterQueryString?: string
+  assetQueryString?: string
   isNotFound?: boolean
   isRedirect?: boolean
 }
diff --git a/packages/next/src/server/render.tsx b/packages/next/src/server/render.tsx
index 8fa524d7d12d0c..cc9d72383733a4 100644
--- a/packages/next/src/server/render.tsx
+++ b/packages/next/src/server/render.tsx
@@ -246,7 +246,7 @@ export type RenderOptsPartial = {
   optimizeCss: any
   nextConfigOutput?: 'standalone' | 'export'
   nextScriptWorkers: any
-  devOnlyCacheBusterQueryString?: string
+  assetQueryString?: string
   resolvedUrl?: string
   resolvedAsPath?: string
   clientReferenceManifest?: ClientReferenceManifest
@@ -268,6 +268,7 @@ export type RenderOptsPartial = {
   largePageDataBytes?: number
   isOnDemandRevalidate?: boolean
   strictNextHead: boolean
+  deploymentId?: string
 }
 
 export type RenderOpts = LoadComponentsReturnType & RenderOptsPartial
@@ -411,10 +412,17 @@ export async function renderToHTML(
   // In dev we invalidate the cache by appending a timestamp to the resource URL.
   // This is a workaround to fix https://github.com/vercel/next.js/issues/5860
   // TODO: remove this workaround when https://bugs.webkit.org/show_bug.cgi?id=187726 is fixed.
-  renderResultMeta.devOnlyCacheBusterQueryString = renderOpts.dev
-    ? renderOpts.devOnlyCacheBusterQueryString || `?ts=${Date.now()}`
+  renderResultMeta.assetQueryString = renderOpts.dev
+    ? renderOpts.assetQueryString || `?ts=${Date.now()}`
     : ''
 
+  // if deploymentId is provided we append it to all asset requests
+  if (renderOpts.deploymentId) {
+    renderResultMeta.assetQueryString += `${
+      renderResultMeta.assetQueryString ? '&' : '?'
+    }dpl=${renderOpts.deploymentId}`
+  }
+
   // don't modify original query object
   query = Object.assign({}, query)
 
@@ -438,8 +446,7 @@ export async function renderToHTML(
     App,
   } = renderOpts
 
-  const devOnlyCacheBusterQueryString =
-    renderResultMeta.devOnlyCacheBusterQueryString
+  const assetQueryString = renderResultMeta.assetQueryString
 
   let Document = renderOpts.Document
 
@@ -1457,7 +1464,7 @@ export async function renderToHTML(
         ? pageConfig.unstable_runtimeJS
         : undefined,
     unstable_JsPreload: pageConfig.unstable_JsPreload,
-    devOnlyCacheBusterQueryString,
+    assetQueryString,
     scriptLoader,
     locale,
     disableOptimizedLoading,
diff --git a/packages/next/src/shared/lib/html-context.ts b/packages/next/src/shared/lib/html-context.ts
index 92ff6c74615058..064110d701755f 100644
--- a/packages/next/src/shared/lib/html-context.ts
+++ b/packages/next/src/shared/lib/html-context.ts
@@ -27,7 +27,7 @@ export type HtmlProps = {
   headTags: any[]
   unstable_runtimeJS?: false
   unstable_JsPreload?: false
-  devOnlyCacheBusterQueryString: string
+  assetQueryString: string
   scriptLoader: {
     afterInteractive?: string[]
     beforeInteractive?: any[]
diff --git a/packages/next/src/shared/lib/image-loader.ts b/packages/next/src/shared/lib/image-loader.ts
index a09749968bfb44..3a8a2ef37ebf9e 100644
--- a/packages/next/src/shared/lib/image-loader.ts
+++ b/packages/next/src/shared/lib/image-loader.ts
@@ -59,6 +59,10 @@ function defaultLoader({
 
   return `${config.path}?url=${encodeURIComponent(src)}&w=${width}&q=${
     quality || 75
+  }${
+    process.env.__NEXT_DEPLOYMENT_ID
+      ? `&dpl=${process.env.__NEXT_DEPLOYMENT_ID}`
+      : ''
   }`
 }
 
diff --git a/test/production/deployment-id-handling/app/app/from-app/edge/page.tsx b/test/production/deployment-id-handling/app/app/from-app/edge/page.tsx
new file mode 100644
index 00000000000000..819e6fc72ae466
--- /dev/null
+++ b/test/production/deployment-id-handling/app/app/from-app/edge/page.tsx
@@ -0,0 +1,14 @@
+import testImage from '../../../public/test.jpg'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <>
+      <p>hello app edge</p>
+      <Image src={testImage} alt="test" />
+    </>
+  )
+}
+
+export const runtime = 'edge'
+export const preferredRegion = 'iad1'
diff --git a/test/production/deployment-id-handling/app/app/from-app/page.tsx b/test/production/deployment-id-handling/app/app/from-app/page.tsx
new file mode 100644
index 00000000000000..5a976df6cc7280
--- /dev/null
+++ b/test/production/deployment-id-handling/app/app/from-app/page.tsx
@@ -0,0 +1,11 @@
+import testImage from '../../public/test.jpg'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <>
+      <p>hello app</p>
+      <Image src={testImage} alt="test" />
+    </>
+  )
+}
diff --git a/test/production/deployment-id-handling/app/app/layout.tsx b/test/production/deployment-id-handling/app/app/layout.tsx
new file mode 100644
index 00000000000000..4ca4f00ec1554d
--- /dev/null
+++ b/test/production/deployment-id-handling/app/app/layout.tsx
@@ -0,0 +1,15 @@
+import { Inter } from 'next/font/google'
+import '../global.css'
+
+const interFont = Inter({
+  subsets: ['latin'],
+})
+
+export default function Layout({ children }) {
+  return (
+    <html>
+      <head />
+      <body className={interFont.className}>{children}</body>
+    </html>
+  )
+}
diff --git a/test/production/deployment-id-handling/app/global.css b/test/production/deployment-id-handling/app/global.css
new file mode 100644
index 00000000000000..af9c754fa2cc59
--- /dev/null
+++ b/test/production/deployment-id-handling/app/global.css
@@ -0,0 +1,5 @@
+html {
+  font-size: 14rem;
+  color: white;
+  background: black;
+}
diff --git a/test/production/deployment-id-handling/app/pages/_app.tsx b/test/production/deployment-id-handling/app/pages/_app.tsx
new file mode 100644
index 00000000000000..9bf5bcd571e38d
--- /dev/null
+++ b/test/production/deployment-id-handling/app/pages/_app.tsx
@@ -0,0 +1,14 @@
+import '../global.css'
+import { Inter } from 'next/font/google'
+
+const interFont = Inter({
+  subsets: ['latin'],
+})
+
+export default function App({ Component, pageProps }) {
+  return (
+    <div className={interFont.className}>
+      <Component {...pageProps} />
+    </div>
+  )
+}
diff --git a/test/production/deployment-id-handling/app/pages/index.tsx b/test/production/deployment-id-handling/app/pages/index.tsx
new file mode 100644
index 00000000000000..38981d83af44c7
--- /dev/null
+++ b/test/production/deployment-id-handling/app/pages/index.tsx
@@ -0,0 +1,11 @@
+import testImage from '../public/test.jpg'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <>
+      <p>hello pages</p>
+      <Image src={testImage} alt="test image" />
+    </>
+  )
+}
diff --git a/test/production/deployment-id-handling/app/pages/pages-edge.tsx b/test/production/deployment-id-handling/app/pages/pages-edge.tsx
new file mode 100644
index 00000000000000..abfb1d7f221773
--- /dev/null
+++ b/test/production/deployment-id-handling/app/pages/pages-edge.tsx
@@ -0,0 +1,15 @@
+import testImage from '../public/test.jpg'
+import Image from 'next/image'
+
+export default function Page() {
+  return (
+    <>
+      <p>hello pages edge</p>
+      <Image src={testImage} alt="test image" />
+    </>
+  )
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}
diff --git a/test/production/deployment-id-handling/app/public/test.jpg b/test/production/deployment-id-handling/app/public/test.jpg
new file mode 100644
index 00000000000000..d536c882412ed3
Binary files /dev/null and b/test/production/deployment-id-handling/app/public/test.jpg differ
diff --git a/test/production/deployment-id-handling/deployment-id-handling.test.ts b/test/production/deployment-id-handling/deployment-id-handling.test.ts
new file mode 100644
index 00000000000000..6e30fbb8ffd2ce
--- /dev/null
+++ b/test/production/deployment-id-handling/deployment-id-handling.test.ts
@@ -0,0 +1,45 @@
+import { createNextDescribe } from 'e2e-utils'
+import { join } from 'node:path'
+
+const deploymentId = Date.now() + ''
+
+createNextDescribe(
+  'deployment-id-handling',
+  {
+    files: join(__dirname, 'app'),
+    env: {
+      NEXT_DEPLOYMENT_ID: deploymentId,
+    },
+  },
+  ({ next }) => {
+    it.each([
+      { urlPath: '/' },
+      { urlPath: '/pages-edge' },
+      { urlPath: '/from-app' },
+      { urlPath: '/from-app/edge' },
+    ])(
+      'should append dpl query to all assets correctly for $urlPath',
+      async ({ urlPath }) => {
+        const $ = await next.render$(urlPath)
+
+        const scripts = Array.from($('script'))
+        expect(scripts.length).toBeGreaterThan(0)
+
+        for (const script of scripts) {
+          if (script.attribs.src) {
+            expect(script.attribs.src).toContain('dpl=' + deploymentId)
+          }
+        }
+
+        const links = Array.from($('link'))
+        expect(links.length).toBeGreaterThan(0)
+
+        for (const link of links) {
+          if (link.attribs.href) {
+            expect(link.attribs.href).toContain('dpl=' + deploymentId)
+          }
+        }
+      }
+    )
+  }
+)