router: support layout/special files as direct children of parallel r…

…outes (#51604)

follow up on #51413 where I kinda forgot to support parsing layout files in sub routes in a parallel segment.

This should fix it by making sure that we check at all level of the app loader tree and by creating an implicit inner `children` for all parallel slot



link NEXT-1301

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

@@ -52,6 +52,7 @@ const FILE_TYPES = {
 
 const GLOBAL_ERROR_FILE_TYPE = 'global-error'
 const PAGE_SEGMENT = 'page$'
+const PARALLEL_CHILDREN_SEGMENT = 'children$'
 
 type DirResolver = (pathToResolve: string) => string
 type PathResolver = (
@@ -315,7 +316,8 @@ async function createTreeCodeFromPath(
 
       subSegmentPath.push(
         ...normalizedParallelSegments.filter(
-          (segment) => segment !== PAGE_SEGMENT
+          (segment) =>
+            segment !== PAGE_SEGMENT && segment !== PARALLEL_CHILDREN_SEGMENT
         )
       )
 
@@ -359,10 +361,17 @@ async function createTreeCodeFromPath(
         }
       }
 
+      let parallelSegmentKey = Array.isArray(parallelSegment)
+        ? parallelSegment[0]
+        : parallelSegment
+
+      parallelSegmentKey =
+        parallelSegmentKey === PARALLEL_CHILDREN_SEGMENT
+          ? 'children'
+          : parallelSegmentKey
+
       props[normalizeParallelKey(parallelKey)] = `[
-        '${
-          Array.isArray(parallelSegment) ? parallelSegment[0] : parallelSegment
-        }',
+        '${parallelSegmentKey}',
         ${subtreeCode},
         {
           ${definedFilePaths
@@ -483,7 +492,8 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
           continue
         }
         if (isParallelRoute) {
-          matched[rest[0]] = rest.slice(1)
+          // we insert a special marker in order to also process layout/etc files at the slot level
+          matched[rest[0]] = [PARALLEL_CHILDREN_SEGMENT, ...rest.slice(1)]
           continue
         }
 

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/@groupslot/default.tsx

@@ -0,0 +1 @@
+export default () => null

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/@slot/page.tsx

@@ -1,3 +1,10 @@
+import Link from 'next/link'
+
 export default function Page() {
-  return 'slot children'
+  return (
+    <>
+      <div>slot children</div>
+      <Link href="/parallel-layout/subroute">parallel subroute</Link>
+    </>
+  )
 }

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/@slot/subroute/layout.tsx

@@ -0,0 +1,8 @@
+export default ({ children }) => {
+  return (
+    <div>
+      <h1 id="parallel-subroute">parallel subroute layout</h1>
+      {children}
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/@slot/subroute/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'subroute children'
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/default.tsx

@@ -0,0 +1 @@
+export default () => null

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

@@ -248,6 +248,17 @@ createNextDescribe(
           () => browser.waitForElementByCss('#parallel-layout').text(),
           'parallel layout'
         )
+
+        // navigate to /parallel-layout/subroute
+        await browser.elementByCss('[href="/parallel-layout/subroute"]').click()
+        await check(
+          () => browser.waitForElementByCss('#parallel-layout').text(),
+          'parallel layout'
+        )
+        await check(
+          () => browser.waitForElementByCss('#parallel-subroute').text(),
+          'parallel subroute layout'
+        )
       })
 
       it('should only scroll to the parallel route that was navigated to', async () => {