backport: fix dynamic route interception not working when deployed with middleware (#77794)

Backports:

- #64923

Author: ztanner

packages/next/src/lib/constants.ts

@@ -1,6 +1,7 @@
 import type { ServerRuntime } from '../../types'
 
 export const NEXT_QUERY_PARAM_PREFIX = 'nxtP'
+export const NEXT_INTERCEPTION_MARKER_PREFIX = 'nxtI'
 
 export const PRERENDER_REVALIDATE_HEADER = 'x-prerender-revalidate'
 export const PRERENDER_REVALIDATE_ONLY_GENERATED_HEADER =

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

@@ -72,7 +72,7 @@ import { removeTrailingSlash } from '../shared/lib/router/utils/remove-trailing-
 import { denormalizePagePath } from '../shared/lib/page-path/denormalize-page-path'
 import * as Log from '../build/output/log'
 import escapePathDelimiters from '../shared/lib/router/utils/escape-path-delimiters'
-import { getUtils } from './server-utils'
+import { getUtils, normalizeNextQueryParam } from './server-utils'
 import isError, { getProperError } from '../lib/is-error'
 import {
   addRequestMeta,
@@ -113,11 +113,7 @@ import {
   fromNodeOutgoingHttpHeaders,
   toNodeOutgoingHttpHeaders,
 } from './web/utils'
-import {
-  CACHE_ONE_YEAR,
-  NEXT_CACHE_TAGS_HEADER,
-  NEXT_QUERY_PARAM_PREFIX,
-} from '../lib/constants'
+import { CACHE_ONE_YEAR, NEXT_CACHE_TAGS_HEADER } from '../lib/constants'
 import { normalizeLocalePath } from '../shared/lib/i18n/normalize-locale-path'
 import {
   NextRequestAdapter,
@@ -1090,18 +1086,13 @@ export default abstract class Server<ServerOptions extends Options = Options> {
           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
+            normalizeNextQueryParam(key, (normalizedKey) => {
+              if (!parsedUrl) return // typeguard
 
+              parsedUrl.query[normalizedKey] = value
               routeParamKeys.add(normalizedKey)
               delete parsedUrl.query[key]
-            }
+            })
           }
 
           // interpolate dynamic params and normalize URL if needed

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

@@ -16,7 +16,10 @@ import {
 } from '../shared/lib/router/utils/prepare-destination'
 import { removeTrailingSlash } from '../shared/lib/router/utils/remove-trailing-slash'
 import { normalizeRscURL } from '../shared/lib/router/utils/app-paths'
-import { NEXT_QUERY_PARAM_PREFIX } from '../lib/constants'
+import {
+  NEXT_INTERCEPTION_MARKER_PREFIX,
+  NEXT_QUERY_PARAM_PREFIX,
+} from '../lib/constants'
 
 export function normalizeVercelUrl(
   req: BaseNextRequest,
@@ -32,9 +35,17 @@ export function normalizeVercelUrl(
     delete (_parsedUrl as any).search
 
     for (const key of Object.keys(_parsedUrl.query)) {
+      const isNextQueryPrefix =
+        key !== NEXT_QUERY_PARAM_PREFIX &&
+        key.startsWith(NEXT_QUERY_PARAM_PREFIX)
+
+      const isNextInterceptionMarkerPrefix =
+        key !== NEXT_INTERCEPTION_MARKER_PREFIX &&
+        key.startsWith(NEXT_INTERCEPTION_MARKER_PREFIX)
+
       if (
-        (key !== NEXT_QUERY_PARAM_PREFIX &&
-          key.startsWith(NEXT_QUERY_PARAM_PREFIX)) ||
+        isNextQueryPrefix ||
+        isNextInterceptionMarkerPrefix ||
         (paramKeys || Object.keys(defaultRouteRegex.groups)).includes(key)
       ) {
         delete _parsedUrl.query[key]
@@ -44,6 +55,24 @@ export function normalizeVercelUrl(
   }
 }
 
+/**
+ * Normalizes `nxtP` and `nxtI` query param values to remove the prefix.
+ * This function does not mutate the input key; it calls the provided function
+ * with the normalized key.
+ */
+export function normalizeNextQueryParam(
+  key: string,
+  onKeyNormalized: (normalizedKey: string) => void
+) {
+  const prefixes = [NEXT_QUERY_PARAM_PREFIX, NEXT_INTERCEPTION_MARKER_PREFIX]
+  for (const prefix of prefixes) {
+    if (key !== prefix && key.startsWith(prefix)) {
+      const normalizedKey = key.substring(prefix.length)
+      onKeyNormalized(normalizedKey)
+    }
+  }
+}
+
 export function interpolateDynamicPath(
   pathname: string,
   params: ParsedUrlQuery,

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

@@ -11,14 +11,14 @@ import { NextURL } from './next-url'
 import { stripInternalSearchParams } from '../internal-utils'
 import { normalizeRscURL } from '../../shared/lib/router/utils/app-paths'
 import { FLIGHT_PARAMETERS } from '../../client/components/app-router-headers'
-import { NEXT_QUERY_PARAM_PREFIX } from '../../lib/constants'
 import { ensureInstrumentationRegistered } from './globals'
 import { RequestAsyncStorageWrapper } from '../async-storage/request-async-storage-wrapper'
 import { requestAsyncStorage } from '../../client/components/request-async-storage.external'
 import { getTracer } from '../lib/trace/tracer'
 import type { TextMapGetter } from 'next/dist/compiled/@opentelemetry/api'
 import { MiddlewareSpan } from '../lib/trace/constants'
 import { getEdgePreviewProps } from './get-edge-preview-props'
+import { normalizeNextQueryParam } from '../server-utils'
 
 export class NextRequestHint extends NextRequest {
   sourcePage: string
@@ -104,18 +104,14 @@ export async function adapter(
   for (const key of keys) {
     const value = requestUrl.searchParams.getAll(key)
 
-    if (
-      key !== NEXT_QUERY_PARAM_PREFIX &&
-      key.startsWith(NEXT_QUERY_PARAM_PREFIX)
-    ) {
-      const normalizedKey = key.substring(NEXT_QUERY_PARAM_PREFIX.length)
+    normalizeNextQueryParam(key, (normalizedKey) => {
       requestUrl.searchParams.delete(normalizedKey)
 
       for (const val of value) {
         requestUrl.searchParams.append(normalizedKey, val)
       }
       requestUrl.searchParams.delete(key)
-    }
+    })
   }
 
   // Ensure users only see page requests, never data requests.

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

@@ -1,10 +1,11 @@
+import {
+  NEXT_INTERCEPTION_MARKER_PREFIX,
+  NEXT_QUERY_PARAM_PREFIX,
+} from '../../../../lib/constants'
 import { INTERCEPTION_ROUTE_MARKERS } from '../../../../server/future/helpers/interception-routes'
 import { escapeStringRegexp } from '../../escape-regexp'
 import { removeTrailingSlash } from './remove-trailing-slash'
 
-const NEXT_QUERY_PARAM_PREFIX = 'nxtP'
-const NEXT_INTERCEPTION_MARKER_PREFIX = 'nxtI'
-
 export interface Group {
   pos: number
   repeat: boolean

test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/@modal/(.)[username]/p/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'intercepted'
+}

test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/@modal/default.tsx

@@ -0,0 +1 @@
+export default () => null

test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/[username]/p/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return 'not intercepted'
+}

test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/layout.tsx

@@ -0,0 +1,14 @@
+export default function Layout({
+  children,
+  modal,
+}: {
+  children: React.ReactNode
+  modal: React.ReactNode
+}) {
+  return (
+    <>
+      <div id="children">{children}</div>
+      <div id="modal">{modal}</div>
+    </>
+  )
+}

test/e2e/app-dir/interception-dynamic-segment-middleware/app/[locale]/page.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <div>
+      <Link href="/foo/p/1">Foo</Link> <Link href="/foo/p/1">Foo</Link>
+    </div>
+  )
+}

test/e2e/app-dir/interception-dynamic-segment-middleware/app/default.tsx

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

test/e2e/app-dir/interception-dynamic-segment-middleware/app/layout.tsx

@@ -0,0 +1,9 @@
+export default function Layout(props: { children: React.ReactNode }) {
+  return (
+    <html>
+      <body>
+        <div>{props.children}</div>
+      </body>
+    </html>
+  )
+}

test/e2e/app-dir/interception-dynamic-segment-middleware/interception-dynamic-segment-middleware.test.ts

@@ -0,0 +1,23 @@
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'interception-dynamic-segment-middleware',
+  {
+    files: __dirname,
+  },
+  ({ next }) => {
+    it('should work when interception route is paired with a dynamic segment & middleware', async () => {
+      const browser = await next.browser('/')
+
+      await browser.elementByCss('[href="/foo/p/1"]').click()
+      await check(() => browser.elementById('modal').text(), /intercepted/)
+      await browser.refresh()
+      await check(() => browser.elementById('modal').text(), '')
+      await check(
+        () => browser.elementById('children').text(),
+        /not intercepted/
+      )
+    })
+  }
+)

test/e2e/app-dir/interception-dynamic-segment-middleware/middleware.ts

@@ -0,0 +1,16 @@
+import { NextResponse, type NextRequest } from 'next/server'
+
+export default async function middleware(request: NextRequest) {
+  const locale = 'en'
+  const { pathname } = request.nextUrl
+  const pathnameHasLocale =
+    pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
+  if (pathnameHasLocale) return
+
+  request.nextUrl.pathname = `/en${pathname}`
+  return NextResponse.rewrite(request.nextUrl)
+}
+
+export const config = {
+  matcher: ['/((?!api|_next|_vercel|.*\\..*).*)'],
+}

test/e2e/app-dir/interception-dynamic-segment-middleware/next.config.js

@@ -0,0 +1,6 @@
+/**
+ * @type {import('next').NextConfig}
+ */
+const nextConfig = {}
+
+module.exports = nextConfig

test/production/eslint/test/__snapshots__/next-build-and-lint.test.ts.snap

@@ -451,6 +451,9 @@ exports[`Next Build production mode first time setup with TypeScript 1`] = `
     "no-var": [
       "error",
     ],
+    "no-with": [
+      "off",
+    ],
     "prefer-const": [
       "error",
     ],