fix catch-all route normalization for default parallel routes (vercel…

…#60240)

### What?
When relying on a `default` route as a fallback, greedier catch-all
segments in the application hierarchy would take precedence, causing
unexpected errors/matching behavior.

### Why?
When performing parallel route catch-all normalization, we push
potential catch-all matches to paths without considering that a path
might instead be matched by a `default` page. Because of this, the
catch-all take precedence and the app will not try and load the default.

For example, given this structure:

```
{
  "/": ["/page"],
  "/[[...catchAll]]": ["/[[...catchAll]]/page"],
  "/nested/[foo]/[bar]": ["/nested/[foo]/[bar]/@slot/page"],
  "/nested/[foo]/[bar]/[baz]": ["/nested/[foo]/[bar]/@slot/[baz]/page"],
}
```

(Where there's a `/nested/[foo]/[bar]/default.tsx`)

The route normalization logic would produce:

```
{
  "/": ["/page"],
  "/[[...catchAll]]": ["/[[...catchAll]]/page"],
  "/nested/[foo]/[bar]": [
    "/nested/[foo]/[bar]/@slot/page",
    "/[[...catchAll]]/page",
  ],
  "/nested/[foo]/[bar]/[baz]": [
    "/nested/[foo]/[bar]/@slot/[baz]/page",
    "/[[...catchAll]]/page",
  ],
}
```
This means that when building the `LoaderTree`, it won't ever try to
find the default for that segment. **This solution operates under the
assumption that if you defined a `default` at a particular layout
segment, you intend for that to render in place of a greedier
catch-all.** (Let me know if this is an incorrect assumption)

### How?
We can't safely normalize catch-all parallel routes without having
context about where the `default` segments are, so this updates
`appPaths` to be inclusive of default segments and then filters them
when doing anything relating to build/export to maintain existing
behavior. We use this information to check if an existing default exists
at the same segment level that we'd push the catch-all to. If one
exists, we don't push the catch-all. Otherwise we proceed as normal.

Closes NEXT-1987

packages/next/src/build/index.ts

@@ -933,7 +933,9 @@ export default async function build(
                 validFileMatcher.isAppRouterPage(absolutePath) ||
                 // For now we only collect the root /not-found page in the app
                 // directory as the 404 fallback
-                validFileMatcher.isRootNotFound(absolutePath),
+                validFileMatcher.isRootNotFound(absolutePath) ||
+                // Default slots are also valid pages, and need to be considered during path normalization
+                validFileMatcher.isDefaultSlot(absolutePath),
               ignorePartFilter: (part) => part.startsWith('_'),
             })
           )

packages/next/src/build/normalize-catchall-routes.test.ts

@@ -96,4 +96,27 @@ describe('normalizeCatchallRoutes', () => {
       ],
     })
   })
+
+  it('should not add the catch-all route to segments that have a more specific default', () => {
+    const appPaths = {
+      '/': ['/page'],
+      '/[[...catchAll]]': ['/[[...catchAll]]/page'],
+      '/nested/[foo]/[bar]/default': [
+        '/nested/[foo]/[bar]/default',
+        '/nested/[foo]/[bar]/@slot/default',
+      ],
+      '/nested/[foo]/[bar]': ['/nested/[foo]/[bar]/@slot/page'],
+      '/nested/[foo]/[bar]/[baz]/default': [
+        '/nested/[foo]/[bar]/@slot/[baz]/default',
+        '/[[...catchAll]]/page',
+      ],
+      '/nested/[foo]/[bar]/[baz]': ['/nested/[foo]/[bar]/@slot/[baz]/page'],
+    }
+
+    const initialAppPaths = JSON.parse(JSON.stringify(appPaths))
+
+    normalizeCatchAllRoutes(appPaths)
+
+    expect(appPaths).toMatchObject(initialAppPaths)
+  })
 })

packages/next/src/build/normalize-catchall-routes.ts

@@ -36,12 +36,15 @@ export function normalizeCatchAllRoutes(
         0,
         normalizedCatchAllRoute.search(catchAllRouteRegex)
       )
-
       if (
         // check if the appPath could match the catch-all
         appPath.startsWith(normalizedCatchAllRouteBasePath) &&
         // check if there's not already a slot value that could match the catch-all
-        !appPaths[appPath].some((path) => hasMatchedSlots(path, catchAllRoute))
+        !appPaths[appPath].some((path) =>
+          hasMatchedSlots(path, catchAllRoute)
+        ) &&
+        // check if the catch-all is not already matched by a default route
+        !appPaths[`${appPath}/default`]
       ) {
         appPaths[appPath].push(catchAllRoute)
       }

packages/next/src/export/index.ts

@@ -55,6 +55,7 @@ import isError from '../lib/is-error'
 import { needsExperimentalReact } from '../lib/needs-experimental-react'
 import { formatManifest } from '../build/manifests/formatter/format-manifest'
 import { validateRevalidate } from '../server/lib/patch-fetch'
+import { isDefaultRoute } from '../lib/is-default-route'
 
 function divideSegments(number: number, segments: number): number[] {
   const result = []
@@ -559,9 +560,13 @@ export async function exportAppImpl(
   ]
 
   const filteredPaths = exportPaths.filter(
-    // Remove API routes
     (route) =>
-      exportPathMap[route]._isAppDir || !isAPIRoute(exportPathMap[route].page)
+      // Remove default routes -- they don't need to be exported
+      // and are only used for parallel route normalization
+      !isDefaultRoute(exportPathMap[route].page) &&
+      (exportPathMap[route]._isAppDir ||
+        // Remove API routes
+        !isAPIRoute(exportPathMap[route].page))
   )
 
   if (filteredPaths.length !== exportPaths.length) {

packages/next/src/lib/is-default-route.ts

@@ -0,0 +1,3 @@
+export function isDefaultRoute(value?: string) {
+  return value?.endsWith('/default')
+}

packages/next/src/server/future/route-matcher-providers/dev/dev-app-page-route-matcher-provider.ts

@@ -19,9 +19,11 @@ export class DevAppPageRouteMatcherProvider extends FileCacheRouteMatcherProvide
 
     this.normalizers = new DevAppNormalizers(appDir, extensions)
 
-    // Match any page file that ends with `/page.${extension}` under the app
+    // Match any page file that ends with `/page.${extension}` or `/default.${extension}` under the app
     // directory.
-    this.expression = new RegExp(`[/\\\\]page\\.(?:${extensions.join('|')})$`)
+    this.expression = new RegExp(
+      `[/\\\\](page|default)\\.(?:${extensions.join('|')})$`
+    )
   }
 
   protected async transform(

packages/next/src/server/lib/find-page-file.ts

@@ -127,6 +127,10 @@ export function createValidFileMatcher(
     return validExtensionFileRegex.test(filePath) || isMetadataFile(filePath)
   }
 
+  function isDefaultSlot(filePath: string) {
+    return filePath.endsWith(`default.${pageExtensions[0]}`)
+  }
+
   function isRootNotFound(filePath: string) {
     if (!appDirPath) {
       return false
@@ -143,5 +147,6 @@ export function createValidFileMatcher(
     isAppRouterPage,
     isMetadataFile,
     isRootNotFound,
+    isDefaultSlot,
   }
 }

test/e2e/app-dir/parallel-routes-catchall-default/app/[locale]/[[...catchAll]]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>/[locale]/[[...catchAll]]/page.tsx</div>
+}

test/e2e/app-dir/parallel-routes-catchall-default/app/[locale]/nested/[foo]/[bar]/@slot/[baz]/default.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>/[locale]/nested/[foo]/[bar]/@slot/[baz]/default.tsx</div>
+}

test/e2e/app-dir/parallel-routes-catchall-default/app/[locale]/nested/[foo]/[bar]/@slot/[baz]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page({ params }) {
+  return <div>/[locale]/nested/[foo]/[bar]/@slot/[baz]/page.tsx</div>
+}

test/e2e/app-dir/parallel-routes-catchall-default/app/[locale]/nested/[foo]/[bar]/@slot/default.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>/[locale]/nested/[foo]/[bar]/@slot/default.tsx</div>
+}

test/e2e/app-dir/parallel-routes-catchall-default/app/[locale]/nested/[foo]/[bar]/@slot/page.tsx

@@ -0,0 +1,3 @@
+export default function Foo() {
+  return <div>/[locale]/nested/[foo]/[bar]/@slot/page.tsx</div>
+}

test/e2e/app-dir/parallel-routes-catchall-default/app/[locale]/nested/[foo]/[bar]/default.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>/[locale]/nested/[foo]/[bar]/default.tsx</div>
+}

test/e2e/app-dir/parallel-routes-catchall-default/app/[locale]/nested/[foo]/[bar]/layout.tsx

@@ -0,0 +1,8 @@
+export default function Layout({ children, slot }) {
+  return (
+    <>
+      Children: <div id="nested-children">{children}</div>
+      Slot: <div id="slot">{slot}</div>
+    </>
+  )
+}

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

@@ -0,0 +1,11 @@
+import React from 'react'
+
+export default function Root({ children }: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        Children: <div id="children">{children}</div>
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/parallel-routes-catchall-default/app/page.tsx

@@ -0,0 +1,3 @@
+export default async function Home() {
+  return <div>Root Page</div>
+}

test/e2e/app-dir/parallel-routes-catchall-default/next.config.js

@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig

test/e2e/app-dir/parallel-routes-catchall-default/parallel-routes-catchall-default.test.ts

@@ -0,0 +1,44 @@
+import { createNextDescribe } from 'e2e-utils'
+
+createNextDescribe(
+  'parallel-routes-catchall-default',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    it('should match default paths before catch-all', async () => {
+      let browser = await next.browser('/en/nested')
+
+      // we have a top-level catch-all but the /nested dir doesn't have a default/page until the /[foo]/[bar] segment
+      // so we expect the top-level catch-all to render
+      expect(await browser.elementById('children').text()).toBe(
+        '/[locale]/[[...catchAll]]/page.tsx'
+      )
+
+      browser = await next.browser('/en/nested/foo/bar')
+
+      // we're now at the /[foo]/[bar] segment, so we expect the matched page to be the default (since there's no page defined)
+      expect(await browser.elementById('nested-children').text()).toBe(
+        '/[locale]/nested/[foo]/[bar]/default.tsx'
+      )
+
+      // we expect the slot to match since there's a page defined at this segment
+      expect(await browser.elementById('slot').text()).toBe(
+        '/[locale]/nested/[foo]/[bar]/@slot/page.tsx'
+      )
+
+      browser = await next.browser('/en/nested/foo/bar/baz')
+
+      // the page slot should still be the one matched at the /[foo]/[bar] segment because it's the default and we
+      // didn't define a page at the /[foo]/[bar]/[baz] segment
+      expect(await browser.elementById('nested-children').text()).toBe(
+        '/[locale]/nested/[foo]/[bar]/default.tsx'
+      )
+
+      // however we do have a slot for the `[baz]` segment and so we expect that to no match
+      expect(await browser.elementById('slot').text()).toBe(
+        '/[locale]/nested/[foo]/[bar]/@slot/[baz]/page.tsx'
+      )
+    })
+  }
+)