Update search params/route params handling on deploy

packages/next/src/build/index.ts

@@ -190,7 +190,7 @@ async function generateClientSsgManifest(
 }
 
 function pageToRoute(page: string) {
-  const routeRegex = getNamedRouteRegex(page)
+  const routeRegex = getNamedRouteRegex(page, true)
   return {
     page,
     regex: normalizeRouteRegex(routeRegex.re.source),
@@ -1975,7 +1975,8 @@ export default async function build(
 
           if (isDynamicRoute(page)) {
             const routeRegex = getNamedRouteRegex(
-              dataRoute.replace(/\.json$/, '')
+              dataRoute.replace(/\.json$/, ''),
+              true
             )
 
             dataRouteRegex = normalizeRouteRegex(
@@ -2392,7 +2393,7 @@ export default async function build(
               // dynamicParams for non-static paths?
               finalDynamicRoutes[page] = {
                 routeRegex: normalizeRouteRegex(
-                  getNamedRouteRegex(page).re.source
+                  getNamedRouteRegex(page, false).re.source
                 ),
                 dataRoute,
                 // if dynamicParams are enabled treat as fallback:
@@ -2404,7 +2405,8 @@ export default async function build(
                   ? null
                   : normalizeRouteRegex(
                       getNamedRouteRegex(
-                        dataRoute.replace(/\.rsc$/, '')
+                        dataRoute.replace(/\.rsc$/, ''),
+                        false
                       ).re.source.replace(/\(\?:\\\/\)\?\$$/, '\\.rsc$')
                     ),
               }
@@ -2769,7 +2771,7 @@ export default async function build(
 
           finalDynamicRoutes[tbdRoute] = {
             routeRegex: normalizeRouteRegex(
-              getNamedRouteRegex(tbdRoute).re.source
+              getNamedRouteRegex(tbdRoute, false).re.source
             ),
             dataRoute,
             fallback: ssgBlockingFallbackPages.has(tbdRoute)
@@ -2779,7 +2781,8 @@ export default async function build(
               : false,
             dataRouteRegex: normalizeRouteRegex(
               getNamedRouteRegex(
-                dataRoute.replace(/\.json$/, '')
+                dataRoute.replace(/\.json$/, ''),
+                false
               ).re.source.replace(/\(\?:\\\/\)\?\$$/, '\\.json$')
             ),
           }

packages/next/src/build/webpack/loaders/next-metadata-image-loader.ts

@@ -59,7 +59,7 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
     const exportedImageData = { ...exported }
     export default (props) => {
       const pathname = ${JSON.stringify(route)}
-      const routeRegex = getNamedRouteRegex(pathname)
+      const routeRegex = getNamedRouteRegex(pathname, false)
       const route = interpolateDynamicPath(pathname, props.params, routeRegex)
 
       const imageData = {
@@ -111,7 +111,7 @@ async function nextMetadataImageLoader(this: any, content: Buffer) {
 
   export default (props) => {
     const pathname = ${JSON.stringify(route)}
-    const routeRegex = getNamedRouteRegex(pathname)
+    const routeRegex = getNamedRouteRegex(pathname, false)
     const route = interpolateDynamicPath(pathname, props.params, routeRegex)
 
     const imageData = ${JSON.stringify(imageData)};

packages/next/src/lib/constants.ts

@@ -1,5 +1,7 @@
 import type { ServerRuntime } from '../../types'
 
+export const NEXT_QUERY_PARAM_PREFIX = 'nextParam'
+
 // in seconds
 export const CACHE_ONE_YEAR = 31536000
 

packages/next/src/server/base-server.ts

@@ -101,6 +101,7 @@ import { RouteKind } from './future/route-kind'
 import { handleInternalServerErrorResponse } from './future/route-modules/helpers/response-handlers'
 import { parseNextReferrerFromHeaders } from './lib/parse-next-referrer'
 import { fromNodeHeaders, toNodeHeaders } from './web/utils'
+import { NEXT_QUERY_PARAM_PREFIX } from '../lib/constants'
 
 export type FindComponentsResult = {
   components: LoadComponentsReturnType
@@ -783,6 +784,24 @@ export default abstract class Server<ServerOptions extends Options = Options> {
             addRequestMeta(req, '_nextRewroteUrl', parsedUrl.pathname!)
             addRequestMeta(req, '_nextDidRewrite', true)
           }
+          const routeParamKeys = new Set<string>()
+
+          for (const key of Object.keys(parsedUrl.query)) {
+            const value = parsedUrl.query[key]
+
+            if (
+              key !== NEXT_QUERY_PARAM_PREFIX &&
+              key.startsWith(NEXT_QUERY_PARAM_PREFIX)
+            ) {
+              const normalizedKey = key.substring(
+                NEXT_QUERY_PARAM_PREFIX.length
+              )
+              parsedUrl.query[normalizedKey] = value
+
+              routeParamKeys.add(normalizedKey)
+              delete parsedUrl.query[key]
+            }
+          }
 
           // interpolate dynamic params and normalize URL if needed
           if (pageIsDynamic) {
@@ -861,7 +880,6 @@ export default abstract class Server<ServerOptions extends Options = Options> {
               matchedPath = utils.interpolateDynamicPath(srcPathname, params)
               req.url = utils.interpolateDynamicPath(req.url!, params)
             }
-            Object.assign(parsedUrl.query, params)
           }
 
           if (pageIsDynamic || didRewrite) {
@@ -870,6 +888,9 @@ export default abstract class Server<ServerOptions extends Options = Options> {
               ...Object.keys(utils.defaultRouteRegex?.groups || {}),
             ])
           }
+          for (const key of routeParamKeys) {
+            delete parsedUrl.query[key]
+          }
           parsedUrl.pathname = `${this.nextConfig.basePath || ''}${
             matchedPath === '/' && this.nextConfig.basePath ? '' : matchedPath
           }`

packages/next/src/server/server-utils.ts

@@ -23,6 +23,7 @@ import { TEMPORARY_REDIRECT_STATUS } from '../shared/lib/constants'
 import { addRequestMeta } from './request-meta'
 import { removeTrailingSlash } from '../shared/lib/router/utils/remove-trailing-slash'
 import { normalizeRscPath } from '../shared/lib/router/utils/app-paths'
+import { NEXT_QUERY_PARAM_PREFIX } from '../lib/constants'
 
 export function normalizeVercelUrl(
   req: BaseNextRequest | IncomingMessage,
@@ -37,8 +38,14 @@ export function normalizeVercelUrl(
     const _parsedUrl = parseUrl(req.url!, true)
     delete (_parsedUrl as any).search
 
-    for (const param of paramKeys || Object.keys(defaultRouteRegex.groups)) {
-      delete _parsedUrl.query[param]
+    for (const key of Object.keys(_parsedUrl.query)) {
+      if (
+        (key !== NEXT_QUERY_PARAM_PREFIX &&
+          key.startsWith(NEXT_QUERY_PARAM_PREFIX)) ||
+        (paramKeys || Object.keys(defaultRouteRegex.groups)).includes(key)
+      ) {
+        delete _parsedUrl.query[key]
+      }
     }
     req.url = formatUrl(_parsedUrl)
   }
@@ -107,7 +114,7 @@ export function getUtils({
   let defaultRouteMatches: ParsedUrlQuery | undefined
 
   if (pageIsDynamic) {
-    defaultRouteRegex = getNamedRouteRegex(page)
+    defaultRouteRegex = getNamedRouteRegex(page, false)
     dynamicRouteMatcher = getRouteMatcher(defaultRouteRegex)
     defaultRouteMatches = dynamicRouteMatcher(page) as ParsedUrlQuery
   }

packages/next/src/server/web-server.ts

@@ -290,7 +290,7 @@ export default class NextWebServer extends BaseServer<WebServerOptions> {
           pathname = this.serverOptions.webServerConfig.page
 
           if (isDynamicRoute(pathname)) {
-            const routeRegex = getNamedRouteRegex(pathname)
+            const routeRegex = getNamedRouteRegex(pathname, false)
             pathname = interpolateDynamicPath(pathname, query, routeRegex)
             normalizeVercelUrl(
               req,

packages/next/src/shared/lib/router/utils/route-regex.ts

@@ -1,6 +1,8 @@
 import { escapeStringRegexp } from '../../escape-regexp'
 import { removeTrailingSlash } from './remove-trailing-slash'
 
+const NEXT_QUERY_PARAM_PREFIX = 'nextParam'
+
 export interface Group {
   pos: number
   repeat: boolean
@@ -88,7 +90,7 @@ function buildGetSafeRouteKey() {
   }
 }
 
-function getNamedParametrizedRoute(route: string) {
+function getNamedParametrizedRoute(route: string, prefixRouteKeys: boolean) {
   const segments = removeTrailingSlash(route).slice(1).split('/')
   const getSafeRouteKey = buildGetSafeRouteKey()
   const routeKeys: { [named: string]: string } = {}
@@ -115,7 +117,13 @@ function getNamedParametrizedRoute(route: string) {
             cleanedKey = getSafeRouteKey()
           }
 
-          routeKeys[cleanedKey] = key
+          if (prefixRouteKeys) {
+            cleanedKey = `${NEXT_QUERY_PARAM_PREFIX}${cleanedKey}`
+            routeKeys[cleanedKey] = `${NEXT_QUERY_PARAM_PREFIX}${key}`
+          } else {
+            routeKeys[cleanedKey] = `${key}`
+          }
+
           return repeat
             ? optional
               ? `(?:/(?<${cleanedKey}>.+?))?`
@@ -133,10 +141,16 @@ function getNamedParametrizedRoute(route: string) {
 /**
  * This function extends `getRouteRegex` generating also a named regexp where
  * each group is named along with a routeKeys object that indexes the assigned
- * named group with its corresponding key.
+ * named group with its corresponding key. When the routeKeys need to be
+ * prefixed to uniquely identify internally the "prefixRouteKey" arg should
+ * be "true" currently this is only the case when creating the routes-manifest
+ * during the build
  */
-export function getNamedRouteRegex(normalizedRoute: string) {
-  const result = getNamedParametrizedRoute(normalizedRoute)
+export function getNamedRouteRegex(
+  normalizedRoute: string,
+  prefixRouteKey: boolean
+) {
+  const result = getNamedParametrizedRoute(normalizedRoute, prefixRouteKey)
   return {
     ...getRouteRegex(normalizedRoute),
     namedRegex: `^${result.namedParameterizedRoute}(?:/)?$`,
@@ -163,7 +177,10 @@ export function getNamedMiddlewareRegex(
     }
   }
 
-  const { namedParameterizedRoute } = getNamedParametrizedRoute(normalizedRoute)
+  const { namedParameterizedRoute } = getNamedParametrizedRoute(
+    normalizedRoute,
+    false
+  )
   let catchAllGroupedRegex = catchAll ? '(?:(/.*)?)' : ''
   return {
     namedRegex: `^${namedParameterizedRoute}${catchAllGroupedRegex}$`,

test/e2e/app-dir/app/app/dynamic-client/[category]/[id]/page.js

@@ -1,5 +1,7 @@
 'use client'
 
+import { useSearchParams } from 'next/navigation'
+
 export default function IdPage({ children, params }) {
   return (
     <>
@@ -8,6 +10,10 @@ export default function IdPage({ children, params }) {
         <span id="id-page-params">{JSON.stringify(params)}</span>
       </p>
       {children}
+
+      <p id="search-params">
+        {JSON.stringify(Object.fromEntries(useSearchParams()))}
+      </p>
     </>
   )
 }

test/e2e/app-dir/app/app/dynamic/[category]/[id]/page.js

@@ -1,11 +1,13 @@
-export default function IdPage({ children, params }) {
+export default function IdPage({ children, params, searchParams }) {
   return (
     <>
       <p>
         Id Page. Params:{' '}
         <span id="id-page-params">{JSON.stringify(params)}</span>
       </p>
       {children}
+
+      <p id="search-params">{JSON.stringify(searchParams)}</p>
     </>
   )
 }

test/e2e/app-dir/app/index.test.ts

@@ -10,6 +10,35 @@ createNextDescribe(
     files: __dirname,
   },
   ({ next, isNextDev: isDev, isNextStart, isNextDeploy }) => {
+    it('should have correct searchParams and params (server)', async () => {
+      const html = await next.render('/dynamic/category-1/id-2?query1=value2')
+      const $ = cheerio.load(html)
+
+      expect(JSON.parse($('#id-page-params').text())).toEqual({
+        category: 'category-1',
+        id: 'id-2',
+      })
+      expect(JSON.parse($('#search-params').text())).toEqual({
+        query1: 'value2',
+      })
+    })
+
+    it('should have correct searchParams and params (client)', async () => {
+      const browser = await next.browser(
+        '/dynamic-client/category-1/id-2?query1=value2'
+      )
+      const html = await browser.eval('document.documentElement.innerHTML')
+      const $ = cheerio.load(html)
+
+      expect(JSON.parse($('#id-page-params').text())).toEqual({
+        category: 'category-1',
+        id: 'id-2',
+      })
+      expect(JSON.parse($('#search-params').text())).toEqual({
+        query1: 'value2',
+      })
+    })
+
     if (!isDev) {
       it('should successfully detect app route during prefetch', async () => {
         const browser = await next.browser('/')

test/e2e/app-dir/parallel-routes-and-interception/parallel-routes-and-interception.test.ts

@@ -5,6 +5,8 @@ createNextDescribe(
   'parallel-routes-and-interception',
   {
     files: __dirname,
+    // TODO: remove after deployment handling is updated
+    skipDeployment: true,
   },
   ({ next }) => {
     describe('parallel routes', () => {

test/e2e/edge-render-getserversideprops/index.test.ts

@@ -140,10 +140,10 @@ describe('edge-render-getserversideprops', () => {
           ),
           namedDataRouteRegex: `^/_next/data/${escapeStringRegexp(
             next.buildId
-          )}/(?<id>[^/]+?)\\.json$`,
+          )}/(?<nextParamid>[^/]+?)\\.json$`,
           page: '/[id]',
           routeKeys: {
-            id: 'id',
+            nextParamid: 'nextParamid',
           },
         },
       ])