fix: infinite reloads when parallel route is an entry

packages/next/src/build/webpack/loaders/next-app-loader.ts

@@ -1,5 +1,5 @@
 import type webpack from 'webpack'
-import type { ValueOf } from '../../../shared/lib/constants'
+import { PAGE_SEGMENT, type ValueOf } from '../../../shared/lib/constants'
 import type { ModuleReference, CollectedMetadata } from './metadata/types'
 
 import path from 'path'
@@ -50,7 +50,6 @@ const FILE_TYPES = {
 } as const
 
 const GLOBAL_ERROR_FILE_TYPE = 'global-error'
-const PAGE_SEGMENT = 'page$'
 const PARALLEL_CHILDREN_SEGMENT = 'children$'
 
 type DirResolver = (pathToResolve: string) => string

packages/next/src/server/dev/on-demand-entry-handler.ts

@@ -32,6 +32,7 @@ import {
   COMPILER_INDEXES,
   COMPILER_NAMES,
   RSC_MODULE_TYPES,
+  PAGE_SEGMENT,
 } from '../../shared/lib/constants'
 import { RouteMatch } from '../future/route-matches/route-match'
 import { RouteKind } from '../future/route-kind'
@@ -100,7 +101,11 @@ export function getEntryKey(
 ) {
   // TODO: handle the /@children slot better
   // this is a quick hack to handle when children is provided as @children/page instead of /page
-  return `${compilerType}@${pageBundleType}@${page.replace(/\/@children/g, '')}`
+  // this also handles the case where PAGE_SEGMENT is part of the entry key (e.g. client@app@/@parallel/page$/page)
+  return `${compilerType}@${pageBundleType}@${page.replace(
+    new RegExp(`(\\${PAGE_SEGMENT}/|/@children)`, 'g'),
+    ''
+  )}`
 }
 
 function getPageBundleType(pageBundlePath: string) {

packages/next/src/shared/lib/constants.ts

@@ -27,6 +27,7 @@ export const PHASE_DEVELOPMENT_SERVER = 'phase-development-server'
 export const PHASE_TEST = 'phase-test'
 export const PHASE_INFO = 'phase-info'
 export const PAGES_MANIFEST = 'pages-manifest.json'
+export const PAGE_SEGMENT = '$page'
 export const APP_PATHS_MANIFEST = 'app-paths-manifest.json'
 export const APP_PATH_ROUTES_MANIFEST = 'app-path-routes-manifest.json'
 export const BUILD_MANIFEST = 'build-manifest.json'

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-no-page/foo/@parallel/page.tsx

@@ -0,0 +1,8 @@
+export default function ParallelPage() {
+  return (
+    <>
+      <p>Hello from parallel page!</p>
+      <div id="timestamp">{Date.now()}</div>
+    </>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-no-page/foo/layout.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+
+export default function Layout({ parallel }: { parallel: React.ReactNode }) {
+  return (
+    <>
+      <h2>LAYOUT</h2>
+      {parallel}
+    </>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts

@@ -6,7 +6,7 @@ createNextDescribe(
   {
     files: __dirname,
   },
-  ({ next }) => {
+  ({ next, isNextDev }) => {
     describe('parallel routes', () => {
       it('should support parallel route tab bars', async () => {
         const browser = await next.browser('/parallel-tab-bar')
@@ -338,6 +338,23 @@ createNextDescribe(
           `{"slug":"foo","id":"bar"}`
         )
       })
+
+      if (isNextDev) {
+        it('should support parallel routes with no page component', async () => {
+          const browser = await next.browser('/parallel-no-page/foo')
+          const timestamp = await browser.elementByCss('#timestamp').text()
+
+          await new Promise((resolve) => {
+            setTimeout(resolve, 3000)
+          })
+
+          await check(async () => {
+            // an invalid response triggers a fast refresh, so if the timestamp doesn't update, this behaved correctly
+            const newTimestamp = await browser.elementByCss('#timestamp').text()
+            return newTimestamp !== timestamp ? 'failure' : 'success'
+          }, 'success')
+        })
+      }
     })
 
     describe('route intercepting with dynamic routes', () => {