fix: add ?dpl to fonts in /_next/static/media (#82384)

Fonts were not protected from version skew so this PR fixes it


https://nextjs.org/docs/14/app/building-your-application/deploying#version-skew

Author: styfle

packages/next/src/pages/_document.tsx

@@ -363,7 +363,8 @@ function getAmpPath(ampPath: string, asPath: string): string {
 function getNextFontLinkTags(
   nextFontManifest: DeepReadonly<NextFontManifest> | undefined,
   dangerousAsPath: string,
-  assetPrefix: string = ''
+  assetPrefix: string = '',
+  assetQueryString: string = ''
 ) {
   if (!nextFontManifest) {
     return {
@@ -403,7 +404,7 @@ function getNextFontLinkTags(
             <link
               key={fontFile}
               rel="preload"
-              href={`${assetPrefix}/_next/${encodeURIPath(fontFile)}`}
+              href={`${assetPrefix}/_next/${encodeURIPath(fontFile)}${assetQueryString}`}
               as="font"
               type={`font/${ext}`}
               crossOrigin="anonymous"
@@ -755,7 +756,8 @@ export class Head extends React.Component<HeadProps> {
     const nextFontLinkTags = getNextFontLinkTags(
       nextFontManifest,
       dangerousAsPath,
-      assetPrefix
+      assetPrefix,
+      this.context.assetQueryString
     )
 
     const tracingMetadata = getTracedMetadata(

packages/next/src/server/app-render/get-layer-assets.tsx

@@ -46,7 +46,7 @@ export function getLayerAssets({
         const fontFilename = preloadedFontFiles[i]
         const ext = /\.(woff|woff2|eot|ttf|otf)$/.exec(fontFilename)![1]
         const type = `font/${ext}`
-        const href = `${ctx.assetPrefix}/_next/${encodeURIPath(fontFilename)}`
+        const href = `${ctx.assetPrefix}/_next/${encodeURIPath(fontFilename)}${getAssetQueryString(ctx, false)}`
 
         preloadCallbacks.push(() => {
           ctx.componentMod.preloadFont(

test/production/deployment-id-handling/deployment-id-cookie-handling.test.ts

@@ -45,11 +45,7 @@ describe('deployment-id-handling disabled', () => {
 
       for (const link of links) {
         if (link.attribs.href) {
-          if (link.attribs.as === 'font') {
-            expect(link.attribs.href).not.toContain('dpl=' + deploymentId)
-          } else {
-            expect(link.attribs.href).not.toContain('dpl=' + deploymentId)
-          }
+          expect(link.attribs.href).not.toContain('dpl=' + deploymentId)
         }
       }
 

test/production/deployment-id-handling/deployment-id-handling.test.ts

@@ -39,11 +39,7 @@ describe.each(['NEXT_DEPLOYMENT_ID', 'CUSTOM_DEPLOYMENT_ID'])(
 
         for (const link of links) {
           if (link.attribs.href && link.attribs.rel !== 'expect') {
-            if (link.attribs.as === 'font') {
-              expect(link.attribs.href).not.toContain('dpl=' + deploymentId)
-            } else {
-              expect(link.attribs.href).toContain('dpl=' + deploymentId)
-            }
+            expect(link.attribs.href).toContain('dpl=' + deploymentId)
           }
         }
 
@@ -173,11 +169,7 @@ describe('deployment-id-handling disabled', () => {
 
       for (const link of links) {
         if (link.attribs.href) {
-          if (link.attribs.as === 'font') {
-            expect(link.attribs.href).not.toContain('dpl=' + deploymentId)
-          } else {
-            expect(link.attribs.href).not.toContain('dpl=' + deploymentId)
-          }
+          expect(link.attribs.href).not.toContain('dpl=' + deploymentId)
         }
       }