fix manifest load errors when using assetPrefix

packages/next/src/client/page-loader.ts

@@ -9,6 +9,10 @@ import { isDynamicRoute } from '../shared/lib/router/utils/is-dynamic'
 import { parseRelativeUrl } from '../shared/lib/router/utils/parse-relative-url'
 import { removeTrailingSlash } from '../shared/lib/router/utils/remove-trailing-slash'
 import { createRouteLoader, getClientBuildManifest } from './route-loader'
+import {
+  DEV_CLIENT_PAGES_MANIFEST,
+  DEV_MIDDLEWARE_MANIFEST,
+} from '../shared/lib/constants'
 
 declare global {
   interface Window {
@@ -60,7 +64,7 @@ export default class PageLoader {
         return window.__DEV_PAGES_MANIFEST.pages
       } else {
         this.promisedDevPagesManifest ||= fetch(
-          `${this.assetPrefix}/_next/static/development/_devPagesManifest.json`
+          `${this.assetPrefix}/_next/static/development/${DEV_CLIENT_PAGES_MANIFEST}`
         )
           .then((res) => res.json())
           .then((manifest: { pages: string[] }) => {
@@ -94,7 +98,7 @@ export default class PageLoader {
           // TODO: Decide what should happen when fetching fails instead of asserting
           // @ts-ignore
           this.promisedMiddlewareMatchers = fetch(
-            `${this.assetPrefix}/_next/static/${this.buildId}/_devMiddlewareManifest.json`
+            `${this.assetPrefix}/_next/static/${this.buildId}/${DEV_MIDDLEWARE_MANIFEST}`
           )
             .then((res) => res.json())
             .then((matchers: MiddlewareMatcher[]) => {

packages/next/src/server/lib/router-utils/setup-dev.ts

@@ -1919,7 +1919,7 @@ async function startWatcher(opts: SetupOpts) {
   async function requestHandler(req: IncomingMessage, res: ServerResponse) {
     const parsedUrl = url.parse(req.url || '/')
 
-    if (parsedUrl.pathname === clientPagesManifestPath) {
+    if (parsedUrl.pathname?.includes(clientPagesManifestPath)) {
       res.statusCode = 200
       res.setHeader('Content-Type', 'application/json; charset=utf-8')
       res.end(
@@ -1932,7 +1932,7 @@ async function startWatcher(opts: SetupOpts) {
       return { finished: true }
     }
 
-    if (parsedUrl.pathname === devMiddlewareManifestPath) {
+    if (parsedUrl.pathname?.includes(devMiddlewareManifestPath)) {
       res.statusCode = 200
       res.setHeader('Content-Type', 'application/json; charset=utf-8')
       res.end(JSON.stringify(serverFields.middleware?.matchers || []))

test/development/basic/asset-prefix.test.ts

@@ -0,0 +1,28 @@
+import { join } from 'path'
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'asset-prefix',
+  {
+    files: join(__dirname, 'asset-prefix'),
+  },
+  ({ next }) => {
+    it('should load the app properly without reloading', async () => {
+      const browser = await next.browser('/')
+      await browser.eval(`window.__v = 1`)
+
+      expect(await browser.elementByCss('div').text()).toBe('Hello World')
+
+      await check(async () => {
+        const logs = await browser.log()
+        const hasError = logs.some((log) =>
+          log.message.includes('Failed to fetch')
+        )
+        return hasError ? 'error' : 'success'
+      }, 'success')
+
+      expect(await browser.eval(`window.__v`)).toBe(1)
+    })
+  }
+)

test/development/basic/asset-prefix/next.config.js

@@ -0,0 +1,20 @@
+const ASSET_PREFIX = 'asset-prefix'
+
+module.exports = {
+  assetPrefix: ASSET_PREFIX,
+  i18n: {
+    locales: ['en-US'],
+    defaultLocale: 'en-US',
+  },
+  async rewrites() {
+    return {
+      beforeFiles: [
+        {
+          source: `/:locale/${ASSET_PREFIX}/_next/:path*`,
+          destination: '/_next/:path*',
+          locale: false,
+        },
+      ],
+    }
+  },
+}

test/development/basic/asset-prefix/pages/index.js

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default function Page() {
+  return <div>Hello World</div>
+}