Fix dynamic catchall parameter interpolation in parallel routes (#84279)

### Fixing a bug

- Tests added with comprehensive e2e test suite for parallel route
navigations
- Error handling improved with clearer error messages for missing
dynamic parameters

### What?

Fixes incorrect parameter interpolation where catchall parameters in
parallel routes included unintended prefix segments.

### Why?

In parallel routes with dynamic catchall parameters, the parameter
interpolation was incorrectly including prefix segments from the route
path. For example, with a route structure like
`/[teamSlug]/@slot/[...catchAll]`, a request to `/vercel/test/path`
would incorrectly set `catchAll = ["vercel", "test", "path"]` instead of
the correct `catchAll = ["test", "path"]`.

This bug affected the accuracy of dynamic parameter values in parallel
routes, leading to incorrect behavior in applications relying on these
parameters for routing logic.

### How?

- Introduced `interpolateParallelRouteParams()` function that properly
handles path depth traversal for complex route structures
- Refactored parameter interpolation to occur earlier in the render
process, ensuring consistency across both postponed and regular
rendering scenarios
- Updated the `getDynamicParam()` function to use pre-interpolated
parameters instead of performing inline path parsing
- Added comprehensive e2e tests to cover various parallel route
navigation scenarios and parameter interpolation edge cases
- Improved error handling with more descriptive error messages for
missing dynamic parameters

The fix ensures that dynamic parameters are correctly extracted based on
their position in the route hierarchy, respecting the boundaries defined
by parallel route slots.

NAR-335

Author: wyattjoh

packages/next/errors.json

@@ -861,5 +861,6 @@
   "860": "Client Max Body Size must be a valid number (bytes) or filesize format string (e.g., \"5mb\")",
   "861": "Client Max Body Size must be larger than 0 bytes",
   "862": "Request body exceeded %s",
-  "863": "\\`<Link legacyBehavior>\\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \\`<a>\\` tag."
+  "863": "\\`<Link legacyBehavior>\\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \\`<a>\\` tag.",
+  "864": "Missing value for segment key: \"%s\" with dynamic param type: %s"
 }

packages/next/src/build/segment-config/app/app-segments.ts

@@ -12,7 +12,7 @@ import {
   isAppPageRouteModule,
 } from '../../../server/route-modules/checks'
 import { isClientReference } from '../../../lib/client-and-server-references'
-import { getSegmentParam } from '../../../server/app-render/get-segment-param'
+import { getSegmentParam } from '../../../shared/lib/router/utils/get-segment-param'
 import {
   getLayoutOrPageModule,
   type LoaderTree,

packages/next/src/build/segment-config/app/collect-root-param-keys.ts

@@ -1,4 +1,4 @@
-import { getSegmentParam } from '../../../server/app-render/get-segment-param'
+import { getSegmentParam } from '../../../shared/lib/router/utils/get-segment-param'
 import type AppPageRouteModule from '../../../server/route-modules/app-page/module'
 import {
   isAppPageRouteModule,

packages/next/src/build/webpack/loaders/next-root-params-loader.ts

@@ -3,7 +3,7 @@ import * as path from 'node:path'
 import * as fs from 'node:fs/promises'
 import { normalizeAppPath } from '../../../shared/lib/router/utils/app-paths'
 import { ensureLeadingSlash } from '../../../shared/lib/page-path/ensure-leading-slash'
-import { getSegmentParam } from '../../../server/app-render/get-segment-param'
+import { getSegmentParam } from '../../../shared/lib/router/utils/get-segment-param'
 
 export type RootParamsLoaderOpts = {
   appDir: string

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

@@ -86,7 +86,7 @@ import {
   getDigestForWellKnownError,
 } from './create-error-handler'
 import { dynamicParamTypes } from './get-short-dynamic-param-type'
-import { getSegmentParam } from './get-segment-param'
+import { getSegmentParam } from '../../shared/lib/router/utils/get-segment-param'
 import { getScriptNonceFromHeader } from './get-script-nonce-from-header'
 import { parseAndValidateFlightRouterState } from './parse-and-validate-flight-router-state'
 import { createFlightRouterStateFromLoaderTree } from './create-flight-router-state-from-loader-tree'
@@ -181,7 +181,7 @@ import { InvariantError } from '../../shared/lib/invariant-error'
 
 import { HTML_CONTENT_TYPE_HEADER, INFINITE_CACHE } from '../../lib/constants'
 import { createComponentStylesAndScripts } from './create-component-styles-and-scripts'
-import { parseLoaderTree } from './parse-loader-tree'
+import { parseLoaderTree } from '../../shared/lib/router/utils/parse-loader-tree'
 import {
   createPrerenderResumeDataCache,
   createRenderResumeDataCache,
@@ -202,7 +202,10 @@ import { isReactLargeShellError } from './react-large-shell-error'
 import type { GlobalErrorComponent } from '../../client/components/builtin/global-error'
 import { normalizeConventionFilePath } from './segment-explorer-path'
 import { getRequestMeta } from '../request-meta'
-import { getDynamicParam } from '../../shared/lib/router/utils/get-dynamic-param'
+import {
+  getDynamicParam,
+  interpolateParallelRouteParams,
+} from '../../shared/lib/router/utils/get-dynamic-param'
 import type { ExperimentalConfig } from '../config-shared'
 import type { Params } from '../request/params'
 import { createPromiseWithResolvers } from '../../shared/lib/promise-with-resolvers'
@@ -394,8 +397,7 @@ function createNotFoundLoaderTree(loaderTree: LoaderTree): LoaderTree {
  * Returns a function that parses the dynamic segment and return the associated value.
  */
 function makeGetDynamicParamFromSegment(
-  params: { [key: string]: any },
-  pagePath: string,
+  interpolatedParams: Params,
   fallbackRouteParams: OpaqueFallbackRouteParams | null
 ): GetDynamicParamFromSegment {
   return function getDynamicParamFromSegment(
@@ -409,10 +411,9 @@ function makeGetDynamicParamFromSegment(
     const segmentKey = segmentParam.param
     const dynamicParamType = dynamicParamTypes[segmentParam.type]
     return getDynamicParam(
-      params,
+      interpolatedParams,
       segmentKey,
       dynamicParamType,
-      pagePath,
       fallbackRouteParams
     )
   }
@@ -1481,6 +1482,7 @@ async function renderToHTMLOrFlightImpl(
   postponedState: PostponedState | null,
   serverComponentsHmrCache: ServerComponentsHmrCache | undefined,
   sharedContext: AppSharedContext,
+  interpolatedParams: Params,
   fallbackRouteParams: OpaqueFallbackRouteParams | null
 ) {
   const isNotFoundPath = pagePath === '/404'
@@ -1695,14 +1697,8 @@ async function renderToHTMLOrFlightImpl(
   // HTML request ID.
   htmlRequestId = parsedRequestHeaders.htmlRequestId || requestId
 
-  /**
-   * Dynamic parameters. E.g. when you visit `/dashboard/vercel` which is rendered by `/dashboard/[slug]` the value will be {"slug": "vercel"}.
-   */
-  const params = renderOpts.params ?? {}
-
   const getDynamicParamFromSegment = makeGetDynamicParamFromSegment(
-    params,
-    pagePath,
+    interpolatedParams,
     fallbackRouteParams
   )
 
@@ -2032,6 +2028,7 @@ export const renderToHTMLOrFlight: AppPageRender = (
   const { isPrefetchRequest, previouslyRevalidatedTags, nonce } =
     parsedRequestHeaders
 
+  let interpolatedParams: Params
   let postponedState: PostponedState | null = null
 
   // If provided, the postpone state should be parsed so it can be provided to
@@ -2043,10 +2040,23 @@ export const renderToHTMLOrFlight: AppPageRender = (
       )
     }
 
+    interpolatedParams = interpolateParallelRouteParams(
+      renderOpts.ComponentMod.routeModule.userland.loaderTree,
+      renderOpts.params ?? {},
+      pagePath,
+      fallbackRouteParams
+    )
+
     postponedState = parsePostponedState(
       renderOpts.postponed,
+      interpolatedParams
+    )
+  } else {
+    interpolatedParams = interpolateParallelRouteParams(
+      renderOpts.ComponentMod.routeModule.userland.loaderTree,
+      renderOpts.params ?? {},
       pagePath,
-      renderOpts.params
+      fallbackRouteParams
     )
   }
 
@@ -2085,6 +2095,7 @@ export const renderToHTMLOrFlight: AppPageRender = (
     postponedState,
     serverComponentsHmrCache,
     sharedContext,
+    interpolatedParams,
     fallbackRouteParams
   )
 }

packages/next/src/server/app-render/create-component-tree.tsx

@@ -11,7 +11,7 @@ import {
 import { getLayoutOrPageModule } from '../lib/app-dir-module'
 import type { LoaderTree } from '../lib/app-dir-module'
 import { interopDefault } from './interop-default'
-import { parseLoaderTree } from './parse-loader-tree'
+import { parseLoaderTree } from '../../shared/lib/router/utils/parse-loader-tree'
 import type { AppRenderContext, GetDynamicParamFromSegment } from './app-render'
 import { createComponentStylesAndScripts } from './create-component-styles-and-scripts'
 import { getLayerAssets } from './get-layer-assets'

packages/next/src/server/app-render/postponed-state.test.ts

@@ -52,7 +52,7 @@ describe('getDynamicHTMLPostponedState', () => {
       isCacheComponentsEnabled
     )
 
-    const parsed = parsePostponedState(state, '/blog/[slug]', { slug: '123' })
+    const parsed = parsePostponedState(state, { slug: '123' })
 
     expect(parsed).toMatchInlineSnapshot(`
      {
@@ -110,7 +110,7 @@ describe('getDynamicHTMLPostponedState', () => {
 
     const value = 'hello'
     const params = { slug: value }
-    const parsed = parsePostponedState(state, '/blog/[slug]', params)
+    const parsed = parsePostponedState(state, params)
     expect(parsed).toEqual({
       type: DynamicState.HTML,
       data: [1, { [value]: value }],
@@ -138,7 +138,7 @@ describe('parsePostponedState', () => {
     const params = {
       slug: Math.random().toString(16).slice(3),
     }
-    const parsed = parsePostponedState(state, '/blog/[slug]', params)
+    const parsed = parsePostponedState(state, params)
 
     // Ensure that it parsed it correctly.
     expect(parsed).toEqual({
@@ -154,7 +154,7 @@ describe('parsePostponedState', () => {
   it('parses a HTML postponed state without fallback params', () => {
     const state = `2:{}null`
     const params = {}
-    const parsed = parsePostponedState(state, '/blog', params)
+    const parsed = parsePostponedState(state, params)
 
     // Ensure that it parsed it correctly.
     expect(parsed).toEqual({
@@ -166,7 +166,7 @@ describe('parsePostponedState', () => {
 
   it('parses a data postponed state', () => {
     const state = '4:nullnull'
-    const parsed = parsePostponedState(state, '/blog', undefined)
+    const parsed = parsePostponedState(state, {})
 
     // Ensure that it parsed it correctly.
     expect(parsed).toEqual({

packages/next/src/server/app-render/postponed-state.ts

@@ -116,8 +116,7 @@ export async function getDynamicDataPostponedState(
 
 export function parsePostponedState(
   state: string,
-  pagePath: string,
-  params: Params | undefined
+  interpolatedParams: Params
 ): PostponedState {
   try {
     const postponedStringLengthMatch = state.match(/^([0-9]*):/)?.[1]
@@ -162,7 +161,10 @@ export function parsePostponedState(
         ) as OpaqueFallbackRouteParamEntries
 
         let postponed = postponedString.slice(match.length + length)
-        for (const [key, [searchValue, dynamicParamType]] of replacements) {
+        for (const [
+          segmentKey,
+          [searchValue, dynamicParamType],
+        ] of replacements) {
           const {
             treeSegment: [
               ,
@@ -172,10 +174,9 @@ export function parsePostponedState(
               value,
             ],
           } = getDynamicParam(
-            params ?? {},
-            key,
+            interpolatedParams,
+            segmentKey,
             dynamicParamType,
-            pagePath,
             null
           )
 

packages/next/src/server/app-render/walk-tree-with-flight-router-state.tsx

@@ -18,7 +18,7 @@ import type { AppRenderContext } from './app-render'
 import { hasLoadingComponentInTree } from './has-loading-component-in-tree'
 import { addSearchParamsIfPageSegment } from '../../shared/lib/segment'
 import { createComponentTree } from './create-component-tree'
-import { getSegmentParam } from './get-segment-param'
+import { getSegmentParam } from '../../shared/lib/router/utils/get-segment-param'
 
 /**
  * Use router state to decide at what common layout to render the page.