bugfix: route interception with dynamic paths

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

@@ -1,8 +1,14 @@
-import { getRouteRegex } from './route-regex'
+import { getNamedRouteRegex } from './route-regex'
 
-describe('getRouteRegex', () => {
+describe('getNamedRouteRegex', () => {
   it('should handle interception markers adjacent to dynamic path segments', () => {
-    const regex = getRouteRegex('/photos/(.)[author]/[id]')
+    const regex = getNamedRouteRegex('/photos/(.)[author]/[id]', true)
+
+    expect(regex.routeKeys).toEqual({
+      nxtIauthor: 'nxtIauthor',
+      nxtPid: 'nxtPid',
+    })
+
     expect(regex.groups['author']).toEqual({
       pos: 1,
       repeat: false,
@@ -19,7 +25,13 @@ describe('getRouteRegex', () => {
   })
 
   it('should handle multi-level interception markers', () => {
-    const regex = getRouteRegex('/photos/(..)(..)[author]/[id]')
+    const regex = getNamedRouteRegex('/photos/(..)(..)[author]/[id]', true)
+
+    expect(regex.routeKeys).toEqual({
+      nxtIauthor: 'nxtIauthor',
+      nxtPid: 'nxtPid',
+    })
+
     expect(regex.groups['author']).toEqual({
       pos: 1,
       repeat: false,
@@ -36,9 +48,14 @@ describe('getRouteRegex', () => {
   })
 
   it('should handle interception markers not adjacent to dynamic path segments', () => {
-    const regex = getRouteRegex('/photos/(.)author/[id]')
+    const regex = getNamedRouteRegex('/photos/(.)author/[id]', true)
+
+    expect(regex.routeKeys).toEqual({
+      nxtPid: 'nxtPid',
+    })
 
     expect(regex.groups['author']).toBeUndefined()
+
     expect(regex.groups['id']).toEqual({
       pos: 1,
       repeat: false,
@@ -49,7 +66,11 @@ describe('getRouteRegex', () => {
   })
 
   it('should handle optional dynamic path segments', () => {
-    const regex = getRouteRegex('/photos/[[id]]')
+    const regex = getNamedRouteRegex('/photos/[[id]]', true)
+
+    expect(regex.routeKeys).toEqual({
+      nxtPid: 'nxtPid',
+    })
 
     expect(regex.groups['id']).toEqual({
       pos: 1,
@@ -59,7 +80,11 @@ describe('getRouteRegex', () => {
   })
 
   it('should handle optional catch-all dynamic path segments', () => {
-    const regex = getRouteRegex('/photos/[[...id]]')
+    const regex = getNamedRouteRegex('/photos/[[...id]]', true)
+
+    expect(regex.routeKeys).toEqual({
+      nxtPid: 'nxtPid',
+    })
 
     expect(regex.groups['id']).toEqual({
       pos: 1,

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

@@ -2,6 +2,7 @@ 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
@@ -99,48 +100,77 @@ function buildGetSafeRouteKey() {
   }
 }
 
+function getSafeKeyFromSegment({
+  segment,
+  routeKeys,
+  keyPrefix,
+}: {
+  segment: string
+  routeKeys: Record<string, string>
+  keyPrefix?: string
+}) {
+  const getSafeRouteKey = buildGetSafeRouteKey()
+
+  const { key, optional, repeat } = parseParameter(segment)
+
+  // replace any non-word characters since they can break
+  // the named regex
+  let cleanedKey = key.replace(/\W/g, '')
+
+  if (keyPrefix) {
+    cleanedKey = `${keyPrefix}${cleanedKey}`
+  }
+  let invalidKey = false
+
+  // check if the key is still invalid and fallback to using a known
+  // safe key
+  if (cleanedKey.length === 0 || cleanedKey.length > 30) {
+    invalidKey = true
+  }
+  if (!isNaN(parseInt(cleanedKey.slice(0, 1)))) {
+    invalidKey = true
+  }
+
+  if (invalidKey) {
+    cleanedKey = getSafeRouteKey()
+  }
+
+  if (keyPrefix) {
+    routeKeys[cleanedKey] = `${keyPrefix}${key}`
+  } else {
+    routeKeys[cleanedKey] = `${key}`
+  }
+
+  return repeat
+    ? optional
+      ? `(?:/(?<${cleanedKey}>.+?))?`
+      : `/(?<${cleanedKey}>.+?)`
+    : `/(?<${cleanedKey}>[^/]+?)`
+}
+
 function getNamedParametrizedRoute(route: string, prefixRouteKeys: boolean) {
   const segments = removeTrailingSlash(route).slice(1).split('/')
-  const getSafeRouteKey = buildGetSafeRouteKey()
   const routeKeys: { [named: string]: string } = {}
   return {
     namedParameterizedRoute: segments
       .map((segment) => {
-        if (segment.startsWith('[') && segment.endsWith(']')) {
-          const { key, optional, repeat } = parseParameter(segment.slice(1, -1))
-          // replace any non-word characters since they can break
-          // the named regex
-          let cleanedKey = key.replace(/\W/g, '')
-
-          if (prefixRouteKeys) {
-            cleanedKey = `${NEXT_QUERY_PARAM_PREFIX}${cleanedKey}`
-          }
-          let invalidKey = false
-
-          // check if the key is still invalid and fallback to using a known
-          // safe key
-          if (cleanedKey.length === 0 || cleanedKey.length > 30) {
-            invalidKey = true
-          }
-          if (!isNaN(parseInt(cleanedKey.slice(0, 1)))) {
-            invalidKey = true
-          }
-
-          if (invalidKey) {
-            cleanedKey = getSafeRouteKey()
-          }
-
-          if (prefixRouteKeys) {
-            routeKeys[cleanedKey] = `${NEXT_QUERY_PARAM_PREFIX}${key}`
-          } else {
-            routeKeys[cleanedKey] = `${key}`
-          }
-
-          return repeat
-            ? optional
-              ? `(?:/(?<${cleanedKey}>.+?))?`
-              : `/(?<${cleanedKey}>.+?)`
-            : `/(?<${cleanedKey}>[^/]+?)`
+        const markerMatches = segment.match(/\((\.{1,3})\)(\w*)/) // Check for intercept markers
+        const paramMatches = segment.match(/\[((?:\[.*\])|.+)\]/) // Check for parameters
+
+        if (markerMatches && paramMatches) {
+          return getSafeKeyFromSegment({
+            segment: paramMatches[1],
+            routeKeys,
+            keyPrefix: prefixRouteKeys
+              ? NEXT_INTERCEPTION_MARKER_PREFIX
+              : undefined,
+          })
+        } else if (paramMatches) {
+          return getSafeKeyFromSegment({
+            segment: paramMatches[1],
+            routeKeys,
+            keyPrefix: prefixRouteKeys ? NEXT_QUERY_PARAM_PREFIX : undefined,
+          })
         } else {
           return `/${escapeStringRegexp(segment)}`
         }