fix(app-render): make css and font respect assetPrefix (#41455)

Add missing `assetPrefix` for link tags (`@next/font` and CSS). The PR also merges multiple duplicated `renderOpt.assetPrefix || ''`.
vercel · Oct 16, 2022 · 7c2fd34 · 7c2fd34
1 parent 1d37afb
commit 7c2fd34
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/packages/next/server/app-render.tsx b/packages/next/server/app-render.tsx
@@ -872,6 +872,8 @@ export async function renderToHTMLOrFlight(
       ComponentMod.pages
     )
 
+    const assetPrefix = renderOpts.assetPrefix || ''
+
     /**
      * Use the provided loader tree to create the React Component tree.
      */
@@ -1105,7 +1107,7 @@ export async function renderToHTMLOrFlight(
                   <link
                     key={fontFile}
                     rel="preload"
-                    href={`/_next/${fontFile}`}
+                    href={`${assetPrefix}/_next/${fontFile}`}
                     as="font"
                     type={`font/${ext}`}
                     crossOrigin="anonymous"
@@ -1116,7 +1118,7 @@ export async function renderToHTMLOrFlight(
                 ? stylesheets.map((href) => (
                     <link
                       rel="stylesheet"
-                      href={`/_next/${href}${cacheBustingUrlSuffix}`}
+                      href={`${assetPrefix}/_next/${href}${cacheBustingUrlSuffix}`}
                       // `Precedence` is an opt-in signal for React to handle
                       // resource loading and deduplication, etc:
                       // https://github.com/facebook/react/pull/25060
@@ -1351,7 +1353,7 @@ export async function renderToHTMLOrFlight(
 
         return (
           <AppRouter
-            assetPrefix={renderOpts.assetPrefix || ''}
+            assetPrefix={assetPrefix}
             initialCanonicalUrl={initialCanonicalUrl}
             initialTree={initialTree}
           >
@@ -1397,7 +1399,7 @@ export async function renderToHTMLOrFlight(
             polyfill.endsWith('.js') && !polyfill.endsWith('.module.js')
         )
         .map((polyfill) => ({
-          src: `${renderOpts.assetPrefix || ''}/_next/${polyfill}`,
+          src: `${assetPrefix}/_next/${polyfill}`,
           integrity: subresourceIntegrityManifest?.[polyfill],
         }))
 
@@ -1444,11 +1446,11 @@ export async function renderToHTMLOrFlight(
             bootstrapScripts: [
               ...(subresourceIntegrityManifest
                 ? buildManifest.rootMainFiles.map((src) => ({
-                    src: `${renderOpts.assetPrefix || ''}/_next/` + src,
+                    src: `${assetPrefix}/_next/` + src,
                     integrity: subresourceIntegrityManifest[src],
                   }))
                 : buildManifest.rootMainFiles.map(
-                    (src) => `${renderOpts.assetPrefix || ''}/_next/` + src
+                    (src) => `${assetPrefix}/_next/` + src
                   )),
             ],
           },
@@ -1476,11 +1478,11 @@ export async function renderToHTMLOrFlight(
             // Include hydration scripts in the HTML
             bootstrapScripts: subresourceIntegrityManifest
               ? buildManifest.rootMainFiles.map((src) => ({
-                  src: `${renderOpts.assetPrefix || ''}/_next/` + src,
+                  src: `${assetPrefix}/_next/` + src,
                   integrity: subresourceIntegrityManifest[src],
                 }))
               : buildManifest.rootMainFiles.map(
-                  (src) => `${renderOpts.assetPrefix || ''}/_next/` + src
+                  (src) => `${assetPrefix}/_next/` + src
                 ),
           },
         })