fix: interception rewrites should support catch-all segments

packages/next/src/lib/generate-interception-routes-rewrites.ts

@@ -9,7 +9,13 @@ import { Rewrite } from './load-custom-routes'
 
 // a function that converts normalised paths (e.g. /foo/[bar]/[baz]) to the format expected by pathToRegexp (e.g. /foo/:bar/:baz)
 function toPathToRegexpPath(path: string): string {
-  return path.replace(/\[([^\]]+)\]/g, ':$1')
+  return path.replace(/\[\[?([^\]]+)\]\]?/g, (_, capture) => {
+    // handle catch-all segments (e.g. /foo/bar/[...baz] or /foo/bar/[[...baz]])
+    if (capture.startsWith('...')) {
+      return `:${capture.slice(3)}*`
+    }
+    return ':' + capture
+  })
 }
 
 // for interception routes we don't have access to the dynamic segments from the

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-routes-dynamic-catchall/photos/(.)catchall/[...id]/page.tsx

@@ -0,0 +1,3 @@
+export default function InterceptedAuthorIdPage() {
+  return <div id="user-intercept-page">Intercepted Page</div>
+}

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-routes-dynamic-catchall/photos/(.)optional-catchall/[[...id]]/page.tsx

@@ -0,0 +1,3 @@
+export default function InterceptedAuthorIdPage() {
+  return <div id="user-intercept-page">Intercepted Page</div>
+}

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-routes-dynamic-catchall/photos/catchall/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function AuthorIdPage() {
+  return <div id="user-regular-page">Regular Page</div>
+}

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-routes-dynamic-catchall/photos/optional-catchall/[id]/page.tsx

@@ -0,0 +1,3 @@
+export default function AuthorIdPage() {
+  return <div id="user-regular-page">Regular Page</div>
+}

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-routes-dynamic-catchall/photos/page.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <>
+      <Link href="/intercepting-routes-dynamic-catchall/photos/catchall/123">
+        Visit Catch-all
+      </Link>
+
+      <Link href="/intercepting-routes-dynamic-catchall/photos/optional-catchall/123">
+        Visit Optional Catch-all
+      </Link>
+    </>
+  )
+}

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

@@ -380,6 +380,88 @@ createNextDescribe(
       })
     })
 
+    describe('route intercepting with dynamic optional catch-all routes', () => {
+      it('should render intercepted route', async () => {
+        const browser = await next.browser(
+          '/intercepting-routes-dynamic-catchall/photos'
+        )
+
+        // Check if navigation to modal route works
+        await check(
+          () =>
+            browser
+              .elementByCss(
+                '[href="/intercepting-routes-dynamic-catchall/photos/optional-catchall/123"]'
+              )
+              .click()
+              .waitForElementByCss('#user-intercept-page')
+              .text(),
+          'Intercepted Page'
+        )
+
+        // Check if url matches even though it was intercepted.
+        await check(
+          () => browser.url(),
+          next.url +
+            '/intercepting-routes-dynamic-catchall/photos/optional-catchall/123'
+        )
+
+        // Trigger a refresh, this should load the normal page, not the modal.
+        await check(
+          () =>
+            browser.refresh().waitForElementByCss('#user-regular-page').text(),
+          'Regular Page'
+        )
+
+        // Check if the url matches still.
+        await check(
+          () => browser.url(),
+          next.url +
+            '/intercepting-routes-dynamic-catchall/photos/optional-catchall/123'
+        )
+      })
+    })
+
+    describe('route intercepting with dynamic catch-all routes', () => {
+      it('should render intercepted route', async () => {
+        const browser = await next.browser(
+          '/intercepting-routes-dynamic-catchall/photos'
+        )
+
+        // Check if navigation to modal route works
+        await check(
+          () =>
+            browser
+              .elementByCss(
+                '[href="/intercepting-routes-dynamic-catchall/photos/catchall/123"]'
+              )
+              .click()
+              .waitForElementByCss('#user-intercept-page')
+              .text(),
+          'Intercepted Page'
+        )
+
+        // Check if url matches even though it was intercepted.
+        await check(
+          () => browser.url(),
+          next.url + '/intercepting-routes-dynamic-catchall/photos/catchall/123'
+        )
+
+        // Trigger a refresh, this should load the normal page, not the modal.
+        await check(
+          () =>
+            browser.refresh().waitForElementByCss('#user-regular-page').text(),
+          'Regular Page'
+        )
+
+        // Check if the url matches still.
+        await check(
+          () => browser.url(),
+          next.url + '/intercepting-routes-dynamic-catchall/photos/catchall/123'
+        )
+      })
+    })
+
     describe('route intercepting', () => {
       it('should render intercepted route', async () => {
         const browser = await next.browser('/intercepting-routes/feed')