fix(turbopack): allow page segments that don't alter the path after c…

…atchall (#67713) ### What? Parallel routes and groups were not allowed after a catch-all segment on the turbopack side previously. Closes PACK-2975 Fixes #64600
vercel · Jul 13, 2024 · 29af5dc · 29af5dc
1 parent 005a776
commit 29af5dc
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 5 deletions.
diff --git a/packages/next-swc/crates/next-core/src/next_app/mod.rs b/packages/next-swc/crates/next-core/src/next_app/mod.rs
@@ -170,13 +170,25 @@ impl AppPage {
     }
 
     pub fn push(&mut self, segment: PageSegment) -> Result<()> {
-        if matches!(
-            self.0.last(),
-            Some(PageSegment::CatchAll(..) | PageSegment::OptionalCatchAll(..))
-        ) && !matches!(segment, PageSegment::PageType(..))
+        let has_catchall = self.0.iter().any(|segment| {
+            matches!(
+                segment,
+                PageSegment::CatchAll(..) | PageSegment::OptionalCatchAll(..)
+            )
+        });
+
+        if has_catchall
+            && matches!(
+                segment,
+                PageSegment::Static(..)
+                    | PageSegment::Dynamic(..)
+                    | PageSegment::CatchAll(..)
+                    | PageSegment::OptionalCatchAll(..)
+            )
         {
             bail!(
-                "Invalid segment {:?}, catch all segment must be the last segment (segments: {:?})",
+                "Invalid segment {:?}, catch all segment must be the last segment modifying the \
+                 path (segments: {:?})",
                 segment,
                 self.0
             )

diff --git a/test/e2e/app-dir/catchall-parallel-routes-group/app/[...catchAll]/@slot/(group)/page.tsx b/test/e2e/app-dir/catchall-parallel-routes-group/app/[...catchAll]/@slot/(group)/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h4 id="catch-all-slot-group-page">Catch-all Slot Group Page</h4>
+}
diff --git a/test/e2e/app-dir/catchall-parallel-routes-group/app/[...catchAll]/@slot/layout.tsx b/test/e2e/app-dir/catchall-parallel-routes-group/app/[...catchAll]/@slot/layout.tsx
@@ -0,0 +1,10 @@
+import { ReactNode } from 'react'
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <div>
+      <h3 id="catch-all-slot-layout">Catch-all Slot Layout</h3>
+      {children}
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/catchall-parallel-routes-group/app/[...catchAll]/layout.tsx b/test/e2e/app-dir/catchall-parallel-routes-group/app/[...catchAll]/layout.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react'
+
+export default function Layout({
+  children,
+  slot,
+}: {
+  children: ReactNode
+  slot: ReactNode
+}) {
+  return (
+    <div id="catch-all-layout">
+      <h2>Catch-all Layout</h2>
+      {slot}
+      {children}
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/catchall-parallel-routes-group/app/[...catchAll]/page.tsx b/test/e2e/app-dir/catchall-parallel-routes-group/app/[...catchAll]/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <h3 id="catch-all-page">Catch-all Page</h3>
+}
diff --git a/test/e2e/app-dir/catchall-parallel-routes-group/app/layout.tsx b/test/e2e/app-dir/catchall-parallel-routes-group/app/layout.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+
+export default function Root({ children }: { children: ReactNode }) {
+  return (
+    <html>
+      <body>
+        <div id="root-layout">
+          <h1>Root Layout</h1>
+          {children}
+        </div>
+      </body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/catchall-parallel-routes-group/app/page.tsx b/test/e2e/app-dir/catchall-parallel-routes-group/app/page.tsx
@@ -0,0 +1,12 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div id="root-page">
+      <h2>Root Page</h2>
+      <div>
+        <Link href="/foobar">To /foobar (catchall)</Link>
+      </div>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/catchall-parallel-routes-group/catchall-parallel-routes-group.test.ts b/test/e2e/app-dir/catchall-parallel-routes-group/catchall-parallel-routes-group.test.ts
@@ -0,0 +1,22 @@
+import { nextTestSetup } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+describe('catchall-parallel-routes-group', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should work without throwing any errors about invalid pages', async () => {
+    const browser = await next.browser('/')
+
+    await check(() => browser.elementByCss('body').text(), /Root Page/)
+    await browser.elementByCss('[href="/foobar"]').click()
+
+    // catch all matches page, but also slot with layout and group
+    await check(() => browser.elementByCss('body').text(), /Catch-all Page/)
+    await check(
+      () => browser.elementByCss('body').text(),
+      /Catch-all Slot Group Page/
+    )
+  })
+})
diff --git a/test/e2e/app-dir/catchall-parallel-routes-group/next.config.js b/test/e2e/app-dir/catchall-parallel-routes-group/next.config.js
@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig