fix interception route rewrite regex not supporting hyphenated segments (#64805)

The function we use to generate a string with named parameters to pass
into `path-to-regexp` currently doesn't properly handle non-word
characters (namely, for the purposes of this bugfix, hyphens). As a
result, `pathToRegexp` will convert something like `/foo/:bar-baz` into
`/^\/foo(?:\/([^\/#\?]+?))-baz[\/#\?]?$/i`, effectively only treating
the `:foo` as part of the regex capture group and leaving a dangling
-baz.

This means using an interception route within a dynamic segment (such as
`/foo/[bar-baz]`) would not properly trigger the route interception

Fixes #64766

Author: ztanner

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

@@ -10,11 +10,14 @@ import type { 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, (_, capture) => {
+    // path-to-regexp only supports word characters, so we replace any non-word characters with underscores
+    const paramName = capture.replace(/\W+/g, '_')
+
     // handle catch-all segments (e.g. /foo/bar/[...baz] or /foo/bar/[[...baz]])
-    if (capture.startsWith('...')) {
-      return `:${capture.slice(3)}*`
+    if (paramName.startsWith('...')) {
+      return `:${paramName.slice(3)}*`
     }
-    return ':' + capture
+    return ':' + paramName
   })
 }
 

test/e2e/app-dir/parallel-routes-and-interception/app/interception-route-special-params/[this-is-my-route]/@intercept/(.)some-page/page.tsx

@@ -0,0 +1,8 @@
+export default function Page({ params }) {
+  return (
+    <div>
+      Hello from [this-is-my-route]/@intercept/some-page. Param:{' '}
+      {params['this-is-my-route']}
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/interception-route-special-params/[this-is-my-route]/@intercept/default.tsx

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

test/e2e/app-dir/parallel-routes-and-interception/app/interception-route-special-params/[this-is-my-route]/layout.tsx

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

test/e2e/app-dir/parallel-routes-and-interception/app/interception-route-special-params/[this-is-my-route]/page.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link'
+
+export default function Page() {
+  return (
+    <Link href="/interception-route-special-params/some-random-param/some-page">
+      Trigger Interception
+    </Link>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/interception-route-special-params/[this-is-my-route]/some-page/page.tsx

@@ -0,0 +1,8 @@
+export default function Page({ params }) {
+  return (
+    <div>
+      Hello from [this-is-my-route]/some-page. Param:{' '}
+      {params['this-is-my-route']}
+    </div>
+  )
+}

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

@@ -873,6 +873,43 @@ createNextDescribe(
         await check(() => browser.waitForElementByCss('#main-slot').text(), '1')
       })
 
+      it('should intercept on routes that contain hyphenated/special dynamic params', async () => {
+        const browser = await next.browser(
+          '/interception-route-special-params/some-random-param'
+        )
+
+        await browser
+          .elementByCss(
+            "[href='/interception-route-special-params/some-random-param/some-page']"
+          )
+          .click()
+
+        const interceptionText =
+          'Hello from [this-is-my-route]/@intercept/some-page. Param: some-random-param'
+        const pageText =
+          'Hello from [this-is-my-route]/some-page. Param: some-random-param'
+
+        await retry(async () => {
+          expect(await browser.elementByCss('body').text()).toContain(
+            interceptionText
+          )
+
+          expect(await browser.elementByCss('body').text()).not.toContain(
+            pageText
+          )
+        })
+
+        await browser.refresh()
+
+        await retry(async () => {
+          expect(await browser.elementByCss('body').text()).toContain(pageText)
+
+          expect(await browser.elementByCss('body').text()).not.toContain(
+            interceptionText
+          )
+        })
+      })
+
       if (isNextStart) {
         it('should not have /default paths in the prerender manifest', async () => {
           const prerenderManifest = JSON.parse(