vercel#42398 fix(app-render): escape segment value

packages/next/client/components/app-router-headers.ts

@@ -1,36 +1,5 @@
-import {
-  DynamicParamTypesShort,
-  FlightRouterState,
-} from '../../server/app-render'
-
 export const RSC = 'RSC' as const
 export const NEXT_ROUTER_STATE_TREE = 'Next-Router-State-Tree' as const
 export const NEXT_ROUTER_PREFETCH = 'Next-Router-Prefetch' as const
 export const RSC_VARY_HEADER =
   `${RSC}, ${NEXT_ROUTER_STATE_TREE}, ${NEXT_ROUTER_PREFETCH}` as const
-
-export const escapeFlightRouterState = (
-  state: FlightRouterState
-): FlightRouterState => {
-  const [segment, parallelRoutes, ...restState] = state
-  const escapedParallelRoutes: typeof parallelRoutes = Object.create({})
-  let escapedSegment: typeof segment = segment
-
-  if (typeof segment !== 'string') {
-    const [param, value, type] = segment
-    const escapedSegmentValue = encodeURIComponent(value)
-    escapedSegment = [
-      param,
-      escapedSegmentValue,
-      type as DynamicParamTypesShort,
-    ]
-  }
-
-  Object.keys(parallelRoutes).forEach((key) => {
-    const childState = parallelRoutes[key]
-
-    escapedParallelRoutes[key] = escapeFlightRouterState(childState)
-  })
-
-  return [escapedSegment, escapedParallelRoutes, ...restState]
-}

packages/next/client/components/app-router.tsx

@@ -1,18 +1,18 @@
 'use client'
 
 import type { ReactNode } from 'react'
-import React, { useCallback, useEffect, useMemo } from 'react'
+import React, { useEffect, useMemo, useCallback } from 'react'
 import { createFromFetch } from 'next/dist/compiled/react-server-dom-webpack/client'
-import type {
-  AppRouterInstance,
-  CacheNode,
-} from '../../shared/lib/app-router-context'
 import {
   AppRouterContext,
-  GlobalLayoutRouterContext,
   LayoutRouterContext,
+  GlobalLayoutRouterContext,
 } from '../../shared/lib/app-router-context'
-import type { FlightData, FlightRouterState } from '../../server/app-render'
+import type {
+  CacheNode,
+  AppRouterInstance,
+} from '../../shared/lib/app-router-context'
+import type { FlightRouterState, FlightData } from '../../server/app-render'
 import {
   ACTION_NAVIGATE,
   ACTION_PREFETCH,
@@ -22,13 +22,14 @@ import {
   reducer,
 } from './reducer'
 import {
-  PathnameContext,
   SearchParamsContext,
+  // ParamsContext,
+  PathnameContext,
+  // LayoutSegmentsContext,
 } from '../../shared/lib/hooks-client-context'
 import { useReducerWithReduxDevtools } from './use-reducer-with-devtools'
 import { ErrorBoundary, GlobalErrorComponent } from './error-boundary'
 import {
-  escapeFlightRouterState,
   NEXT_ROUTER_PREFETCH,
   NEXT_ROUTER_STATE_TREE,
   RSC,
@@ -64,9 +65,7 @@ export async function fetchServerResponse(
     // Enable flight response
     [RSC]: '1',
     // Provide the current router state
-    [NEXT_ROUTER_STATE_TREE]: JSON.stringify(
-      escapeFlightRouterState(flightRouterState)
-    ),
+    [NEXT_ROUTER_STATE_TREE]: JSON.stringify(flightRouterState),
   }
   if (prefetch) {
     // Enable prefetch response

packages/next/server/app-render.tsx

@@ -855,7 +855,13 @@ export async function renderToHTMLOrFlight(
       }
 
       const key = segmentParam.param
-      const value = pathParams[key]
+      let value = pathParams[key]
+
+      if (Array.isArray(value)) {
+        value = value.map((i) => encodeURIComponent(i))
+      } else if (typeof value === 'string') {
+        value = encodeURIComponent(value)
+      }
 
       if (!value) {
         // Handle case where optional catchall does not have a value, e.g. `/dashboard/[...slug]` when requesting `/dashboard`