Fix 404 responses for interception routes with missing children slots (#85779)

### What?

Introduces a null-rendering default component for interception routes to
prevent 404 responses when children slots are missing.

### Why?

When rendering interception routes like `(.)[id]`, there's a segment
mismatch where the interception route lacks a children slot that the
base `[id]` route has.

**The Bug:**
Previously, the framework injected a 404 page into the missing default
slot for the children route. On platforms like Vercel, this caused full
404 RSC responses because the HTTP status code has semantic meaning for
route behavior when using cache components. This resulted in the
"unknown segment value fallback page" issue.

**Impact:**
- RSC requests for interception routes would return 404 status codes
- Platform routing behavior was incorrectly triggered by these 404
responses
- Only affects pages rendering with cache components

### How?

- Created new `default-null.tsx` builtin component that renders `null`
- Updated Rust code (`app_structure.rs`) to detect interception routes
and use the null default
- Updated webpack loader (`next-app-loader/index.ts`) to check
`isInterceptionRouteAppPath()` and inject the null default
- Removed test-specific default component that was working around this
bug
- The old `page.tsx` is still used during client navigation, so there's
no visible change to users

This ensures minimal RSC payload changes and prevents 404 status codes
while maintaining existing client-side behavior.

NAR-483

Author: wyattjoh

crates/next-core/src/app_structure.rs

@@ -1226,17 +1226,19 @@ async fn directory_tree_to_loader_tree_internal(
 
         if let Some(subtree) = subtree {
             if let Some(key) = parallel_route_key {
-                let is_inside_catchall = app_page.is_catchall();
-
                 // Validate that parallel routes (except "children") have a default.js file.
-                // Skip this validation if the slot is UNDER a catch-all route (i.e., the
-                // parallel route is a child of a catch-all segment).
+                // This validation matches the webpack loader's logic but is implemented
+                // differently due to Turbopack's single-pass recursive processing.
+
+                // Check if we're inside a catch-all route (i.e., the parallel route is a child
+                // of a catch-all segment). Only skip validation if the slot is UNDER a catch-all.
                 // For example:
                 //   /[...catchAll]/@slot - is_inside_catchall = true (skip validation) ✓
                 //   /@slot/[...catchAll] - is_inside_catchall = false (require default) ✓
                 // The catch-all provides fallback behavior, so default.js is not required.
-                //
-                // Also skip validation if this is a leaf segment (no child routes).
+                let is_inside_catchall = app_page.is_catchall();
+
+                // Check if this is a leaf segment (no child routes).
                 // Leaf segments don't need default.js because there are no child routes
                 // that could cause the parallel slot to unmatch. For example:
                 //   /repo-overview/@slot/page with no child routes - is_leaf_segment = true (skip
@@ -1245,10 +1247,23 @@ async fn directory_tree_to_loader_tree_internal(
                 // This also handles route groups correctly by filtering them out.
                 let is_leaf_segment = !has_child_routes(directory_tree);
 
+                // Turbopack-specific: Check if the parallel slot has matching child routes.
+                // In webpack, this is checked implicitly via the two-phase processing:
+                // slots with content are processed first and skip validation in the second phase.
+                // In Turbopack's single-pass approach, we check directly if the slot has child
+                // routes. If the slot has child routes that match the parent's
+                // child routes, it can render content for those routes and doesn't
+                // need a default. For example:
+                //   /parent/@slot/page + /parent/@slot/child + /parent/child - slot_has_children =
+                // true (skip validation) ✓   /parent/@slot/page + /parent/child (no
+                // @slot/child) - slot_has_children = false (require default) ✓
+                let slot_has_children = has_child_routes(subdirectory);
+
                 if key != "children"
                     && subdirectory.modules.default.is_none()
                     && !is_inside_catchall
                     && !is_leaf_segment
+                    && !slot_has_children
                 {
                     missing_default_parallel_route_issue(
                         app_dir.clone(),
@@ -1341,8 +1356,15 @@ async fn directory_tree_to_loader_tree_internal(
 
             tree.parallel_routes.insert(
                 key.clone(),
-                default_route_tree(app_dir.clone(), global_metadata, app_page.clone(), default)
-                    .await?,
+                default_route_tree(
+                    app_dir.clone(),
+                    global_metadata,
+                    app_page.clone(),
+                    default,
+                    key.clone(),
+                    for_app_path.clone(),
+                )
+                .await?,
             );
         }
     }
@@ -1352,8 +1374,10 @@ async fn directory_tree_to_loader_tree_internal(
             tree = default_route_tree(
                 app_dir.clone(),
                 global_metadata,
-                app_page,
+                app_page.clone(),
                 modules.default.clone(),
+                rcstr!("children"),
+                for_app_path.clone(),
             )
             .await?;
         } else {
@@ -1365,8 +1389,10 @@ async fn directory_tree_to_loader_tree_internal(
             default_route_tree(
                 app_dir.clone(),
                 global_metadata,
-                app_page,
+                app_page.clone(),
                 modules.default.clone(),
+                rcstr!("children"),
+                for_app_path.clone(),
             )
             .await?,
         );
@@ -1388,6 +1414,8 @@ async fn default_route_tree(
     global_metadata: Vc<GlobalMetadata>,
     app_page: AppPage,
     default_component: Option<FileSystemPath>,
+    slot_name: RcStr,
+    for_app_path: AppPath,
 ) -> Result<AppPageLoaderTree> {
     Ok(AppPageLoaderTree {
         page: app_page.clone(),
@@ -1399,13 +1427,16 @@ async fn default_route_tree(
                 ..Default::default()
             }
         } else {
-            // default fallback component
+            let contains_interception = for_app_path.contains_interception();
+
+            let default_file = if contains_interception && slot_name == "children" {
+                "dist/client/components/builtin/default-null.js"
+            } else {
+                "dist/client/components/builtin/default.js"
+            };
+
             AppDirModules {
-                default: Some(
-                    get_next_package(app_dir)
-                        .await?
-                        .join("dist/client/components/builtin/default.js")?,
-                ),
+                default: Some(get_next_package(app_dir).await?.join(default_file)?),
                 ..Default::default()
             }
         },

crates/next-core/src/next_app/mod.rs

@@ -460,6 +460,18 @@ impl AppPath {
 
         true
     }
+
+    /// Returns true if ANY segment in the entire path is an interception route.
+    /// This is different from `is_intercepting()` which only checks the last
+    /// segment.
+    pub fn contains_interception(&self) -> bool {
+        self.iter().any(|segment| {
+            matches!(
+                segment,
+                PathSegment::Static(s) if s.starts_with("(.)") || s.starts_with("(..)") || s.starts_with("(...)")
+            )
+        })
+    }
 }
 
 impl Deref for AppPath {

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

@@ -35,9 +35,11 @@ import {
 import { getFilesInDir } from '../../../../lib/get-files-in-dir'
 import type { PageExtensions } from '../../../page-extensions-type'
 import { PARALLEL_ROUTE_DEFAULT_PATH } from '../../../../client/components/builtin/default'
+import { PARALLEL_ROUTE_DEFAULT_NULL_PATH } from '../../../../client/components/builtin/default-null'
 import type { Compilation } from 'webpack'
 import { createAppRouteCode } from './create-app-route-code'
 import { MissingDefaultParallelRouteError } from '../../../../shared/lib/errors/missing-default-parallel-route-error'
+import { isInterceptionRouteAppPath } from '../../../../shared/lib/router/utils/interception-routes'
 
 import { normalizePathSep } from '../../../../shared/lib/page-path/normalize-path-sep'
 import { installBindings } from '../../../swc/install-bindings'
@@ -558,7 +560,18 @@ async function createTreeCodeFromPath(
         let defaultPath = await resolver(`${fullSegmentPath}/default`)
         if (!defaultPath) {
           if (adjacentParallelSegment === 'children') {
-            defaultPath = PARALLEL_ROUTE_DEFAULT_PATH
+            // When we host applications on Vercel, the status code affects the
+            // underlying behavior of the route, which when we are missing the
+            // children slot of an interception route, will yield a full 404
+            // response for the RSC request instead. For this reason, we expect
+            // that if a default file is missing when we're rendering an
+            // interception route, we instead always render null for the default
+            // slot to avoid the full 404 response.
+            if (isInterceptionRouteAppPath(page)) {
+              defaultPath = PARALLEL_ROUTE_DEFAULT_NULL_PATH
+            } else {
+              defaultPath = PARALLEL_ROUTE_DEFAULT_PATH
+            }
           } else {
             // Check if we're inside a catch-all route (i.e., the parallel route is a child
             // of a catch-all segment). Only skip validation if the slot is UNDER a catch-all.

packages/next/src/client/components/builtin/default-null.tsx

@@ -0,0 +1,6 @@
+export const PARALLEL_ROUTE_DEFAULT_NULL_PATH =
+  'next/dist/client/components/builtin/default-null.js'
+
+export default function ParallelRouteDefaultNull() {
+  return null
+}

test/e2e/app-dir/interception-dynamic-segment/app/@modal/(.)explicit-layout/deeper/page.tsx

@@ -0,0 +1,8 @@
+export default function Page() {
+  return (
+    <div>
+      <h3>Deeper page under explicit layout</h3>
+      <p>This page is nested under the explicit layout</p>
+    </div>
+  )
+}

test/e2e/app-dir/interception-dynamic-segment/app/@modal/(.)explicit-layout/layout.tsx

@@ -0,0 +1,18 @@
+/**
+ * TEST CASE: Interception route WITH explicit layout.tsx but NO parallel routes
+ *
+ * This is the KEY test to determine if we need to check for:
+ * - Implicit layout (from parallel routes) OR
+ * - Explicit layout (layout.tsx file)
+ */
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div>
+      <div>Explicit layout at (.)explicit-layout</div>
+      <div>
+        <div>children:</div>
+        {children}
+      </div>
+    </div>
+  )
+}

test/e2e/app-dir/interception-dynamic-segment/app/@modal/(.)has-both/@sidebar/page.tsx

@@ -0,0 +1,7 @@
+export default function Page() {
+  return (
+    <div>
+      <strong>@sidebar content</strong>
+    </div>
+  )
+}

test/e2e/app-dir/interception-dynamic-segment/app/@modal/(.)has-both/page.tsx

@@ -0,0 +1,17 @@
+/**
+ * TEST CASE 3: Interception route WITH parallel routes AND page.tsx
+ *
+ * Expected: NO default.tsx needed for children slot
+ * Reason: Has page.tsx which fills the children slot
+ *         The @sidebar slot exists but children slot has content
+ */
+export default function Page() {
+  return (
+    <div>
+      <h3>✅ TEST CASE 3: Has both @sidebar AND page.tsx</h3>
+      <p>This level has @sidebar parallel route AND a page.tsx</p>
+      <p>The page.tsx fills the children slot.</p>
+      <p>NO default.tsx needed!</p>
+    </div>
+  )
+}

test/e2e/app-dir/interception-dynamic-segment/app/@modal/(.)has-page/page.tsx

@@ -0,0 +1,15 @@
+/**
+ * TEST CASE 1: Interception route WITH page.tsx
+ *
+ * Expected: NO default.tsx needed
+ * Reason: Has a page at this level, so no children slot exists
+ */
+export default function Page() {
+  return (
+    <div>
+      <h3>✅ TEST CASE 1: Has page.tsx</h3>
+      <p>This interception route has a page.tsx at this level.</p>
+      <p>No children slot exists, so NO default.tsx needed!</p>
+    </div>
+  )
+}

test/e2e/app-dir/interception-dynamic-segment/app/@modal/(.)no-parallel-routes/deeper/page.tsx

@@ -0,0 +1,17 @@
+/**
+ * TEST CASE 2: Interception route WITHOUT parallel routes
+ *
+ * Expected: NO default.tsx needed at (.)no-parallel-routes level
+ * Reason: No @parallel routes exist, so no implicit layout created
+ *         Only has a nested page, no children slot at root level
+ */
+export default function Page() {
+  return (
+    <div>
+      <h3>✅ TEST CASE 2: No parallel routes</h3>
+      <p>This is a nested page under (.)no-parallel-routes/deeper</p>
+      <p>No @sidebar or other parallel routes exist at parent level.</p>
+      <p>NO default.tsx needed at (.)no-parallel-routes!</p>
+    </div>
+  )
+}