bugfix (pages): assetPrefix should not cause hard nav in development (#79176)

In development when handling the page request, we are sending the
parsedUrl with the basePath stripped but not assetPrefix. As a result,
when setting an assetPrefix, the chunk would 404 which causes a hard
nav. It'd then recover and work correctly on subsequent navs.

This applies the exact same handling we had for basePath, but for
assetPrefix.

Fixes #77241

Author: ztanner

packages/next/src/server/lib/router-server.ts

@@ -327,11 +327,20 @@ export async function initialize(opts: {
         if (blockCrossSite(req, res, config.allowedDevOrigins, opts.hostname)) {
           return
         }
+
         const origUrl = req.url || '/'
 
+        // both the basePath and assetPrefix need to be stripped from the URL
+        // so that the development bundler can find the correct file
         if (config.basePath && pathHasPrefix(origUrl, config.basePath)) {
           req.url = removePathPrefix(origUrl, config.basePath)
+        } else if (
+          config.assetPrefix &&
+          pathHasPrefix(origUrl, config.assetPrefix)
+        ) {
+          req.url = removePathPrefix(origUrl, config.assetPrefix)
         }
+
         const parsedUrl = url.parse(req.url || '/')
 
         const hotReloaderResult = await developmentBundler.hotReloader.run(
@@ -343,6 +352,7 @@ export async function initialize(opts: {
         if (hotReloaderResult.finished) {
           return hotReloaderResult
         }
+
         req.url = origUrl
       }
 
@@ -370,6 +380,11 @@ export async function initialize(opts: {
 
         if (config.basePath && pathHasPrefix(origUrl, config.basePath)) {
           req.url = removePathPrefix(origUrl, config.basePath)
+        } else if (
+          config.assetPrefix &&
+          pathHasPrefix(origUrl, config.assetPrefix)
+        ) {
+          req.url = removePathPrefix(origUrl, config.assetPrefix)
         }
 
         if (resHeaders) {

packages/next/src/server/lib/router-utils/resolve-routes.ts

@@ -189,8 +189,19 @@ export function getResolveRoutes(
         parsedUrl.pathname || '',
         config.basePath
       )
+      let normalizedPath = parsedUrl.pathname || '/'
+
+      if (config.basePath && pathHasPrefix(normalizedPath, config.basePath)) {
+        normalizedPath = removePathPrefix(normalizedPath, config.basePath)
+      } else if (
+        config.assetPrefix &&
+        pathHasPrefix(normalizedPath, config.assetPrefix)
+      ) {
+        normalizedPath = removePathPrefix(normalizedPath, config.assetPrefix)
+      }
+
       initialLocaleResult = normalizeLocalePath(
-        removePathPrefix(parsedUrl.pathname || '/', config.basePath),
+        normalizedPath,
         config.i18n.locales
       )
 

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

@@ -1,6 +1,6 @@
 import { join } from 'path'
 import { nextTestSetup } from 'e2e-utils'
-import { check } from 'next-test-utils'
+import { check, retry } from 'next-test-utils'
 
 describe('asset-prefix', () => {
   const { next } = nextTestSetup({
@@ -11,7 +11,7 @@ describe('asset-prefix', () => {
     const browser = await next.browser('/')
     await browser.eval(`window.__v = 1`)
 
-    expect(await browser.elementByCss('div').text()).toBe('Hello World')
+    expect(await browser.elementByCss('#text').text()).toBe('Hello World')
 
     await check(async () => {
       const logs = await browser.log()
@@ -24,6 +24,16 @@ describe('asset-prefix', () => {
     expect(await browser.eval(`window.__v`)).toBe(1)
   })
 
+  it('should navigate to another page without hard navigating', async () => {
+    const browser = await next.browser('/')
+    await browser.eval(`window.__v = 1`)
+    await browser.elementByCss('[href="/page2"]').click()
+    await retry(async () => {
+      expect(await browser.elementByCss('div').text()).toBe('Page 2')
+    })
+    expect(await browser.eval(`window.__v`)).toBe(1)
+  })
+
   describe('rewrites', () => {
     it('rewrites that do not start with assetPrefix should still work', async () => {
       const res = await next.fetch('/not-custom-asset-prefix/api/test-json', {})

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

@@ -1,4 +1,4 @@
-const ASSET_PREFIX = 'custom-asset-prefix'
+const ASSET_PREFIX = '/custom-asset-prefix'
 
 module.exports = {
   assetPrefix: ASSET_PREFIX,

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

@@ -1,5 +1,11 @@
+import Link from 'next/link'
 import React from 'react'
 
 export default function Page() {
-  return <div>Hello World</div>
+  return (
+    <>
+      <div id="text">Hello World</div>
+      <Link href="/page2">Page 2</Link>
+    </>
+  )
 }

test/development/basic/asset-prefix/fixture/pages/page2.js

@@ -0,0 +1,3 @@
+export default function Page2() {
+  return <div>Page 2</div>
+}