implement parallel routes default

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

@@ -17,6 +17,7 @@ import {
 } from './metadata/discover'
 import { isAppRouteRoute } from '../../../lib/is-app-route-route'
 import { isMetadataRoute } from '../../../lib/metadata/is-metadata-route'
+import { promises as fs } from 'fs'
 
 export type AppLoaderOptions = {
   name: string
@@ -56,6 +57,8 @@ export type ComponentsType = {
   readonly page?: ModuleReference
 } & {
   readonly metadata?: CollectedMetadata
+} & {
+  readonly defaultPage?: ModuleReference
 }
 
 async function createAppRouteCode({
@@ -132,6 +135,37 @@ async function createTreeCodeFromPath(
   let rootLayout: string | undefined
   let globalError: string | undefined
 
+  async function resolveAdjacentParallelSegments(
+    segmentPath: string
+  ): Promise<string[]> {
+    const absoluteSegmentPath = await resolver(
+      `${appDirPrefix}${segmentPath}`,
+      true
+    )
+
+    if (!absoluteSegmentPath) {
+      return []
+    }
+
+    // We need to resolve all parallel routes in this level.
+    const files = await fs.readdir(absoluteSegmentPath)
+
+    const parallelSegments: string[] = ['children']
+
+    await Promise.all(
+      files.map(async (file) => {
+        const filePath = path.join(absoluteSegmentPath, file)
+        const stat = await fs.stat(filePath)
+
+        if (stat.isDirectory() && file.startsWith('@')) {
+          parallelSegments.push(file.slice(1))
+        }
+      })
+    )
+
+    return parallelSegments
+  }
+
   async function createSubtreePropsFromSegmentPath(
     segments: string[]
   ): Promise<{
@@ -257,6 +291,34 @@ async function createTreeCodeFromPath(
       ]`
     }
 
+    const adjacentParallelSegments = await resolveAdjacentParallelSegments(
+      segmentPath
+    )
+
+    for (const adjacentParallelSegment of adjacentParallelSegments) {
+      if (!props[adjacentParallelSegment]) {
+        const actualSegment =
+          adjacentParallelSegment === 'children'
+            ? ''
+            : `@${adjacentParallelSegment}`
+        const defaultPath =
+          (await resolver(
+            `${appDirPrefix}${segmentPath}/${actualSegment}/default`
+          )) ??
+          (await resolver(`next/dist/client/components/parallel-route-default`))
+
+        props[adjacentParallelSegment] = `[
+          '__DEFAULT__',
+          {},
+          {
+            defaultPage: [() => import(/* webpackMode: "eager" */ ${JSON.stringify(
+              defaultPath
+            )}), ${JSON.stringify(defaultPath)}],
+          }
+        ]`
+      }
+    }
+
     return {
       treeCode: `{
         ${Object.entries(props)
@@ -316,6 +378,7 @@ const nextAppLoader: AppLoader = async function nextAppLoader() {
 
   const normalizedAppPaths =
     typeof appPaths === 'string' ? [appPaths] : appPaths || []
+
   const resolveParallelSegments = (
     pathname: string
   ): [string, string | string[]][] => {

packages/next/src/client/components/parallel-route-default.tsx

@@ -0,0 +1,3 @@
+export default function NoopParallelRouteDefault() {
+  return null
+}

packages/next/src/client/components/router-reducer/apply-router-state-patch-to-tree.ts

@@ -14,6 +14,12 @@ function applyPatch(
   const [initialSegment, initialParallelRoutes] = initialTree
   const [patchSegment, patchParallelRoutes] = patchTree
 
+  // if the applied patch segment is __DEFAULT__ then we can ignore it and return the initial tree
+  // this is because the __DEFAULT__ segment is used as a placeholder on navigation
+  if (patchSegment === '__DEFAULT__') {
+    return initialTree
+  }
+
   if (matchSegment(initialSegment, patchSegment)) {
     const newParallelRoutes: FlightRouterState[1] = {}
     for (const key in initialParallelRoutes) {
@@ -85,7 +91,7 @@ export function applyRouterStatePatchToTree(
 
   let parallelRoutePatch
   if (lastSegment) {
-    parallelRoutePatch = applyPatch(treePatch, parallelRoutes[parallelRouteKey])
+    parallelRoutePatch = applyPatch(parallelRoutes[parallelRouteKey], treePatch)
   } else {
     parallelRoutePatch = applyRouterStatePatchToTree(
       flightSegmentPath.slice(2),

packages/next/src/server/app-render/index.tsx

@@ -437,7 +437,8 @@ export async function renderToHTMLOrFlight(
         template,
         error,
         loading,
-        page,
+        defaultPage,
+        page = defaultPage,
         'not-found': notFound,
       } = components
       const layoutOrPagePath = layout?.[1] || page?.[1]

packages/next/src/server/lib/app-dir-module.ts

@@ -10,19 +10,23 @@ export type LoaderTree = [
 ]
 
 export async function getLayoutOrPageModule(loaderTree: LoaderTree) {
-  const { layout, page } = loaderTree[2]
+  const { layout, page, defaultPage } = loaderTree[2]
   const isLayout = typeof layout !== 'undefined'
   const isPage = typeof page !== 'undefined'
+  const isDefaultPage = typeof defaultPage !== 'undefined'
 
   let value = undefined
   let modType: 'layout' | 'page' | undefined = undefined
+
   if (isLayout) {
     value = await layout[0]()
     modType = 'layout'
-  }
-  if (isPage) {
+  } else if (isPage) {
     value = await page[0]()
     modType = 'page'
+  } else if (isDefaultPage) {
+    value = await defaultPage[0]()
+    modType = 'page'
   }
 
   return [value, modType] as const

test/e2e/app-dir/parallel-routes-and-interception/app/parallel-tab-bar/default.js

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