Fix interception route rewrites for nested dynamic routes

packages/next/errors.json

@@ -847,5 +847,7 @@
   "846": "Route %s used \\`cookies()\\` inside a function cached with \\`unstable_cache()\\`. Accessing Dynamic data sources inside a cache scope is not supported. If you need this data inside a cached function use \\`cookies()\\` outside of the cached function and pass the required dynamic data in as an argument. See more info here: https://nextjs.org/docs/app/api-reference/functions/unstable_cache",
   "847": "Route %s with \\`dynamic = \"error\"\\` couldn't be rendered statically because it used \\`connection()\\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
   "848": "%sused %s. \\`searchParams\\` is a Promise and must be unwrapped with \\`await\\` or \\`React.use()\\` before accessing its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis",
-  "849": "Route %s with \\`dynamic = \"error\"\\` couldn't be rendered statically because it used \\`cookies()\\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering"
+  "849": "Route %s with \\`dynamic = \"error\"\\` couldn't be rendered statically because it used \\`cookies()\\`. See more info here: https://nextjs.org/docs/app/building-your-application/rendering/static-and-dynamic#dynamic-rendering",
+  "850": "No reference found for param: %s in reference: %s",
+  "851": "No reference found for segment: %s with reference: %s"
 }

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

@@ -396,7 +396,7 @@ function Router({
     }
   }, [])
 
-  const { cache, tree, nextUrl, focusAndScrollRef } = state
+  const { cache, tree, nextUrl, focusAndScrollRef, lastNextUrl } = state
 
   const matchingHead = useMemo(() => {
     return findHeadInCache(cache, tree[1])
@@ -423,8 +423,9 @@ function Router({
       tree,
       focusAndScrollRef,
       nextUrl,
+      lastNextUrl,
     }
-  }, [tree, focusAndScrollRef, nextUrl])
+  }, [tree, focusAndScrollRef, nextUrl, lastNextUrl])
 
   let head
   if (matchingHead !== null) {

packages/next/src/client/components/layout-router.tsx

@@ -389,7 +389,14 @@ function InnerLayoutRouter({
         new URL(url, location.origin),
         {
           flightRouterState: refetchTree,
-          nextUrl: includeNextUrl ? context.nextUrl : null,
+          nextUrl: includeNextUrl
+            ? // We always send the last next-url, not the current when
+              // performing a dynamic request. This is because we update
+              // the next-url after a navigation, but we want the same
+              // interception route to be matched that used the last
+              // next-url.
+              context.lastNextUrl || context.nextUrl
+            : null,
         }
       ).then((serverResponse) => {
         startTransition(() => {

packages/next/src/client/components/router-reducer/create-initial-router-state.test.tsx

@@ -138,6 +138,7 @@ describe('createInitialRouterState', () => {
       },
       cache: expectedCache,
       nextUrl: '/linking',
+      lastNextUrl: null,
     }
 
     expect(state).toMatchObject(expected)

packages/next/src/client/components/router-reducer/create-initial-router-state.ts

@@ -110,6 +110,7 @@ export function createInitialRouterState({
       // the || operator is intentional, the pathname can be an empty string
       (extractPathFromFlightRouterState(initialTree) || location?.pathname) ??
       null,
+    lastNextUrl: null,
   }
 
   if (process.env.NODE_ENV !== 'development' && location) {

packages/next/src/client/components/router-reducer/handle-mutable.ts

@@ -16,13 +16,15 @@ export function handleMutable(
   // shouldScroll is true by default, can override to false.
   const shouldScroll = mutable.shouldScroll ?? true
 
+  let lastNextUrl = state.lastNextUrl
   let nextUrl = state.nextUrl
 
   if (isNotUndefined(mutable.patchedTree)) {
     // If we received a patched tree, we need to compute the changed path.
     const changedPath = computeChangedPath(state.tree, mutable.patchedTree)
     if (changedPath) {
       // If the tree changed, we need to update the nextUrl
+      lastNextUrl = nextUrl
       nextUrl = changedPath
     } else if (!nextUrl) {
       // if the tree ends up being the same (ie, no changed path), and we don't have a nextUrl, then we should use the canonicalUrl
@@ -84,5 +86,6 @@ export function handleMutable(
       ? mutable.patchedTree
       : state.tree,
     nextUrl,
+    lastNextUrl,
   }
 }

packages/next/src/client/components/router-reducer/reducers/navigate-reducer.ts

@@ -387,7 +387,12 @@ export function navigateReducer(
                   new URL(updatedCanonicalUrl, url.origin),
                   {
                     flightRouterState: dynamicRequestTree,
-                    nextUrl: state.nextUrl,
+                    // We always send the last next-url, not the current when
+                    // performing a dynamic request. This is because we update
+                    // the next-url after a navigation, but we want the same
+                    // interception route to be matched that used the last
+                    // next-url.
+                    nextUrl: state.lastNextUrl || state.nextUrl,
                   }
                 )
 

packages/next/src/client/components/router-reducer/reducers/restore-reducer.ts

@@ -45,5 +45,6 @@ export function restoreReducer(
     // Restore provided tree
     tree: treeToRestore,
     nextUrl: extractPathFromFlightRouterState(treeToRestore) ?? url.pathname,
+    lastNextUrl: null,
   }
 }

packages/next/src/client/components/router-reducer/reducers/server-action-reducer.ts

@@ -244,8 +244,14 @@ export function serverActionReducer(
   // Otherwise the server action might be intercepted with the wrong action id
   // (ie, one that corresponds with the intercepted route)
   const nextUrl =
-    state.nextUrl && hasInterceptionRouteInCurrentTree(state.tree)
-      ? state.nextUrl
+    // We always send the last next-url, not the current when
+    // performing a dynamic request. This is because we update
+    // the next-url after a navigation, but we want the same
+    // interception route to be matched that used the last
+    // next-url.
+    (state.lastNextUrl || state.nextUrl) &&
+    hasInterceptionRouteInCurrentTree(state.tree)
+      ? state.lastNextUrl || state.nextUrl
       : null
 
   const navigatedAt = Date.now()

packages/next/src/client/components/router-reducer/router-reducer-types.ts

@@ -254,6 +254,11 @@ export type AppRouterState = {
    * The underlying "url" representing the UI state, which is used for intercepting routes.
    */
   nextUrl: string | null
+
+  /**
+   * The last next-url that was used previous to a dynamic navigation.
+   */
+  lastNextUrl: string | null
 }
 
 export type ReadonlyReducerState = Readonly<AppRouterState>

packages/next/src/lib/build-custom-route.ts

@@ -45,7 +45,19 @@ export function buildCustomRoute(
     )
   }
 
-  const regex = normalizeRouteRegex(source)
+  // If this is an internal rewrite and it already provides a regex, use it
+  // otherwise, normalize the source to a regex.
+  let regex: string
+  if (
+    !route.internal ||
+    type !== 'rewrite' ||
+    !('regex' in route) ||
+    typeof route.regex !== 'string'
+  ) {
+    regex = normalizeRouteRegex(source)
+  } else {
+    regex = route.regex
+  }
 
   if (type !== 'redirect') {
     return { ...route, regex }