router: add layout and other file supports to parallel routes (#51413)

This PR fixes a bug in which the layout files were not picked up if they were direct children of a parallel route slot.

Note: there's a bunch of other files that I've used for debugging that are not used for the test but I'm leaving them for future me.




link NEXT-969

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

@@ -304,19 +304,26 @@ async function createTreeCodeFromPath(
         continue
       }
 
+      const subSegmentPath = [...segments]
+      if (parallelKey !== 'children') {
+        subSegmentPath.push(parallelKey)
+      }
+
+      const normalizedParallelSegments = Array.isArray(parallelSegment)
+        ? parallelSegment.slice(0, 1)
+        : [parallelSegment]
+
+      subSegmentPath.push(
+        ...normalizedParallelSegments.filter(
+          (segment) => segment !== PAGE_SEGMENT
+        )
+      )
+
       const { treeCode: subtreeCode } = await createSubtreePropsFromSegmentPath(
-        [
-          ...segments,
-          ...(parallelKey === 'children' ? [] : [parallelKey]),
-          Array.isArray(parallelSegment) ? parallelSegment[0] : parallelSegment,
-        ]
+        subSegmentPath
       )
 
-      const parallelSegmentPath =
-        segmentPath +
-        '/' +
-        (parallelKey === 'children' ? '' : `${parallelKey}/`) +
-        (Array.isArray(parallelSegment) ? parallelSegment[0] : parallelSegment)
+      const parallelSegmentPath = subSegmentPath.join('/')
 
       // `page` is not included here as it's added above.
       const filePaths = await Promise.all(
@@ -394,7 +401,6 @@ async function createTreeCodeFromPath(
         ]`
       }
     }
-
     return {
       treeCode: `{
         ${Object.entries(props)
@@ -473,10 +479,9 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
 
         const isParallelRoute = rest[0].startsWith('@')
         if (isParallelRoute && rest.length === 2 && rest[1] === 'page') {
-          matched[rest[0]] = PAGE_SEGMENT
+          matched[rest[0]] = [PAGE_SEGMENT]
           continue
         }
-
         if (isParallelRoute) {
           matched[rest[0]] = rest.slice(1)
           continue
@@ -485,7 +490,6 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
         matched.children = rest[0]
       }
     }
-
     return Object.entries(matched)
   }
 

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/(.)sub/[slug]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'intercepted parallel layout slug'
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/(.)sub/layout.tsx

@@ -0,0 +1,8 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <h1> intercepted layout</h1>
+      {children}
+    </>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/@groupslot/(slot)/layout.tsx

@@ -0,0 +1,8 @@
+export default function Layout({ children }) {
+  return (
+    <div>
+      <h1>Parallel group slot Layout</h1>
+      {children}
+    </div>
+  )
+}

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+import Link from 'next/link'
+
+export default function Layout({ children, slot, groupslot }) {
+  return (
+    <div>
+      <h1>Main Layout</h1>
+      {children}
+      <div id="slot">{slot}</div>
+      <div id="groupslot">{groupslot}</div>
+      <Link href="/parallel-layout/sub/route">/sub/route</Link>
+    </div>
+  )
+}

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

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

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-layout/sub/[slug]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'parallel layout slug'
+}

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

@@ -242,6 +242,14 @@ createNextDescribe(
         )
       })
 
+      it('should support layout files in parallel routes', async () => {
+        const browser = await next.browser('/parallel-layout')
+        await check(
+          () => browser.waitForElementByCss('#parallel-layout').text(),
+          'parallel layout'
+        )
+      })
+
       it('should only scroll to the parallel route that was navigated to', async () => {
         const browser = await next.browser('/parallel-scroll')