Fix: HMR in multi-zone handling 🌱 (#59471)

### What?
When running a
[multi-zone](https://github.com/vercel/next.js/tree/canary/examples/with-zones)
app in dev, guest app pages would infinitely reload if you change the
basePath of the host app to the default one (omit basePath settings in
next.config.js) (empty string `""` as per Next.js docs).

### Why?
The HMR upgrade request would fail and get caught into a retry loop. In
the multi-zone case, they fail because the upgrade request would be sent
again for a request that had already been upgraded. This resulted in a
"server.handleUpgrade() was called more than once with the same socket"
error, causing the upgrade request to fail.

Every time a retry occurred, the page would trigger a full refresh since
certain HMR errors cause the browser to reload.

### How?
This ensures the upgrade handler only responds to requests that match
the configured basePath (considering when there is no basePath). Default
basePath for Next.js applications it's an empty string `""`.
 
Ref: https://nextjs.org/docs/app/api-reference/next-config-js/basePath

Other fixes & updates related to the bug:
- Updated test apps to avoid having issues regarding client & server
mismatch for dates
- Added default use case in e2e tests, where you have a default Next.js
application where the basePath it's the default one and a guest app that
it's being routed by the main one through Next.js rewrites.

Closes NEXT-1797
Fixes #59161
Fixes #56615
Fixes #54454

---------

Co-authored-by: Zack Tanner <[email protected]>

Author: agustints

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

@@ -33,6 +33,7 @@ import {
 import { RedirectStatusCode } from '../../client/components/redirect-status-code'
 import { DevBundlerService } from './dev-bundler-service'
 import { type Span, trace } from '../../trace'
+import { ensureLeadingSlash } from '../../shared/lib/page-path/ensure-leading-slash'
 
 const debug = setupDebug('next:router-server:main')
 const isNextFont = (pathname: string | null) =>
@@ -585,13 +586,15 @@ export async function initialize(opts: {
       })
 
       if (opts.dev && developmentBundler && req.url) {
-        const isHMRRequest = req.url.includes('/_next/webpack-hmr')
+        const { basePath, assetPrefix } = config
+
+        const isHMRRequest = req.url.startsWith(
+          ensureLeadingSlash(`${assetPrefix || basePath}/_next/webpack-hmr`)
+        )
+
         // only handle HMR requests if the basePath in the request
         // matches the basePath for the handler responding to the request
-        const isRequestForCurrentBasepath =
-          !config.basePath || pathHasPrefix(req.url, config.basePath)
-
-        if (isHMRRequest && isRequestForCurrentBasepath) {
+        if (isHMRRequest) {
           return developmentBundler.hotReloader.onHMR(req, socket, head)
         }
       }

test/e2e/multi-zone/app/apps/first/next.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  basePath: '/guest',
+}

test/e2e/multi-zone/app/apps/first/pages/index.tsx

@@ -1,5 +1,5 @@
 {
   "version": "0.0.1",
   "private": true,
-  "name": "first-app"
+  "name": "guest-app"
 }

test/e2e/multi-zone/app/apps/first/tsconfig.json

@@ -1,5 +1,5 @@
 export default function Page() {
-  return <p>hello from second app /another/[slug]</p>
+  return <p>hello from guest app /another/[slug]</p>
 }
 
 export function getServerSideProps({ params }) {

test/e2e/multi-zone/app/apps/guest/next.config.js

@@ -1,5 +1,5 @@
 export default function Page() {
-  return <p>hello from first app /blog/[slug]</p>
+  return <p>hello from guest app /blog/[slug]</p>
 }
 
 export function getServerSideProps({ params }) {

test/e2e/multi-zone/app/apps/first/package.json renamed to test/e2e/multi-zone/app/apps/guest/package.json

@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+  const [date, setDate] = useState<Number>()
+
+  useEffect(() => {
+    setDate(Date.now())
+  }, [])
+
+  // this variable is edited by the test to verify HMR
+  const editedContent = ''
+  return (
+    <>
+      <p>hello from guest app</p>
+      <div>{editedContent}</div>
+      <div id="now">{`${date}`}</div>
+    </>
+  )
+}

test/e2e/multi-zone/app/apps/second/pages/another/[slug].tsx renamed to test/e2e/multi-zone/app/apps/guest/pages/another/[slug].tsx

@@ -0,0 +1 @@
+module.exports = {}