fix: absolute assetPrefix url with path (#77256)

Netail · ijjk · web-flow · commit 413fbd600dce · 2025-03-20T15:47:50.000-07:00
### What? When an absolute url with path has been set as the assetPrefix, the path is not used when serving the bundles. Instead the bundles are served directly on the root. The rewrite did not seem to take a path into account, only a host. e.g. when the assetPrefix is set to `https://example.vercel.sh/custom-asset-prefix`, it does not serve the bundles from `<host>/custom-asset-prefix/_next/*` instead only from `<host>/_next/*` Related; #77118 --------- Co-authored-by: JJ Kasper <jj@jjsweb.site>
diff --git a/packages/next/src/lib/load-custom-routes.test.ts b/packages/next/src/lib/load-custom-routes.test.ts
@@ -144,12 +144,25 @@ describe('loadCustomRoutes', () => {
 
       it('does not insert assetPrefix rewrite for /_next/ paths when assetPrefix is absolute URL', async () => {
         const customRoutes = await loadCustomRoutes({
-          assetPrefix: 'https://example.com/custom-asset-prefix',
+          assetPrefix: 'https://example.com',
         })
         expect(customRoutes.rewrites.beforeFiles).toEqual([])
         expect(customRoutes.rewrites.afterFiles).toEqual([])
       })
 
+      it('automatically insert assetPrefix rewrite for /_next/ paths when assetPrefix is absolute URL with a path', async () => {
+        const customRoutes = await loadCustomRoutes({
+          assetPrefix: 'https://example.com/custom-asset-prefix',
+        })
+        expect(customRoutes.rewrites.beforeFiles).toEqual([
+          {
+            destination: '/_next/:path+',
+            source: '/custom-asset-prefix/_next/:path+',
+          },
+        ])
+        expect(customRoutes.rewrites.afterFiles).toEqual([])
+      })
+
       it('does not add rewrite when assetPrefix === basePath', async () => {
         const customRoutes = await loadCustomRoutes({
           assetPrefix: '/base',
diff --git a/packages/next/src/lib/load-custom-routes.ts b/packages/next/src/lib/load-custom-routes.ts
@@ -596,19 +596,28 @@ async function loadRewrites(config: NextConfig) {
   // If assetPrefix is set, add a rewrite for `/${assetPrefix}/_next/*`
   // requests so that they are handled in any of dev, start, or deploy
   // automatically without the user having to configure this.
-  // If the assetPrefix is an absolute URL, we can't add an automatic rewrite.
+  // If the assetPrefix is an absolute URL, we still consider the path for automatic rewrite.
+  // but hostname routing must be handled by the user
   let maybeAssetPrefixRewrite: Rewrite[] = []
-  if (config.assetPrefix && !isFullStringUrl(config.assetPrefix)) {
-    const assetPrefix = config.assetPrefix.startsWith('/')
-      ? config.assetPrefix
-      : `/${config.assetPrefix}`
-    const basePath = config.basePath || ''
-    // If these are the same, then this would result in an infinite rewrite.
-    if (assetPrefix !== basePath) {
-      maybeAssetPrefixRewrite.push({
-        source: `${assetPrefix}/_next/:path+`,
-        destination: `${basePath}/_next/:path+`,
-      })
+  if (config.assetPrefix) {
+    let prefix = config.assetPrefix
+    if (
+      isFullStringUrl(config.assetPrefix) &&
+      URL.canParse(config.assetPrefix)
+    ) {
+      prefix = new URL(config.assetPrefix).pathname
+    }
+
+    if (prefix && prefix !== '/') {
+      const assetPrefix = prefix.startsWith('/') ? prefix : `/${prefix}`
+      const basePath = config.basePath || ''
+      // If these are the same, then this would result in an infinite rewrite.
+      if (assetPrefix !== basePath) {
+        maybeAssetPrefixRewrite.push({
+          source: `${assetPrefix}/_next/:path+`,
+          destination: `${basePath}/_next/:path+`,
+        })
+      }
     }
   }
 
diff --git a/test/e2e/app-dir/asset-prefix-absolute/app/layout.js b/test/e2e/app-dir/asset-prefix-absolute/app/layout.js
@@ -0,0 +1,10 @@
+export default function Root({ children }) {
+  return (
+    <html>
+      <head>
+        <title>Hello</title>
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/asset-prefix-absolute/app/page.js b/test/e2e/app-dir/asset-prefix-absolute/app/page.js
@@ -0,0 +1,3 @@
+export default function HomePage() {
+  return <p>Hello world</p>
+}
diff --git a/test/e2e/app-dir/asset-prefix-absolute/asset-prefix-absolute.test.ts b/test/e2e/app-dir/asset-prefix-absolute/asset-prefix-absolute.test.ts
@@ -0,0 +1,33 @@
+import { nextTestSetup } from 'e2e-utils'
+
+describe('app-dir absolute assetPrefix', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('bundles should return 200 on served assetPrefix', async () => {
+    const $ = await next.render$('/')
+
+    let bundles = []
+    for (const script of $('script').toArray()) {
+      const { src } = script.attribs
+      if (
+        src?.includes(
+          'https://example.vercel.sh/custom-asset-prefix/_next/static'
+        )
+      ) {
+        bundles.push(src)
+      }
+    }
+
+    expect(bundles.length).toBeGreaterThan(0)
+
+    for (const src of bundles) {
+      // Remove hostname to check if pathname is still used for serving the bundles
+      const bundlePathWithoutHost = decodeURI(new URL(src).pathname)
+      const { status } = await next.fetch(bundlePathWithoutHost)
+
+      expect(status).toBe(200)
+    }
+  })
+})
diff --git a/test/e2e/app-dir/asset-prefix-absolute/next.config.js b/test/e2e/app-dir/asset-prefix-absolute/next.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  assetPrefix: 'https://example.vercel.sh/custom-asset-prefix',
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default function HomePage() {`
	`2`	`+ return <p>Hello world</p>`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ assetPrefix: 'https://example.vercel.sh/custom-asset-prefix',`
	`3`	`+}`