Merge branch 'canary' into update-react

packages/next/src/lib/create-client-router-filter.ts

@@ -4,6 +4,10 @@ import { isDynamicRoute } from '../shared/lib/router/utils'
 import { removeTrailingSlash } from '../shared/lib/router/utils/remove-trailing-slash'
 import type { Redirect } from './load-custom-routes'
 import { tryToParsePath } from './try-to-parse-path'
+import {
+  extractInterceptionRouteInformation,
+  isInterceptionRouteAppPath,
+} from '../server/future/helpers/interception-routes'
 
 export function createClientRouterFilter(
   paths: string[],
@@ -16,8 +20,12 @@ export function createClientRouterFilter(
   const staticPaths = new Set<string>()
   const dynamicPaths = new Set<string>()
 
-  for (const path of paths) {
+  for (let path of paths) {
     if (isDynamicRoute(path)) {
+      if (isInterceptionRouteAppPath(path)) {
+        path = extractInterceptionRouteInformation(path).interceptedRoute
+      }
+
       let subPath = ''
       const pathParts = path.split('/')
 

packages/next/src/shared/lib/router/utils/is-dynamic.ts

@@ -1,6 +1,15 @@
+import {
+  extractInterceptionRouteInformation,
+  isInterceptionRouteAppPath,
+} from '../../../../server/future/helpers/interception-routes'
+
 // Identify /[param]/ in route string
 const TEST_ROUTE = /\/\[[^/]+?\](?=\/|$)/
 
 export function isDynamicRoute(route: string): boolean {
+  if (isInterceptionRouteAppPath(route)) {
+    route = extractInterceptionRouteInformation(route).interceptedRoute
+  }
+
   return TEST_ROUTE.test(route)
 }

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-siblings/@modal/(.)[id]/page.js

@@ -0,0 +1,8 @@
+export default function Page({ params: { id } }) {
+  return (
+    <div>
+      <h2>intercepting-siblings</h2>
+      <p id="intercepted-sibling">{id}</p>
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-siblings/@modal/default.js

@@ -0,0 +1,3 @@
+export default function Default() {
+  return <div>default</div>
+}

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-siblings/[id]/page.js

@@ -0,0 +1,8 @@
+export default function Page({ params: { id } }) {
+  return (
+    <div>
+      <h2>main slot</h2>
+      <p id="main-slot">{id}</p>
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-siblings/layout.js

@@ -0,0 +1,29 @@
+import Link from 'next/link'
+
+export default function Layout({ children, modal }) {
+  return (
+    <div>
+      <h1>intercepting-siblings</h1>
+      <div style={{ border: '1px solid black', padding: '1rem' }}>
+        {children}
+      </div>
+      <hr />
+      <div style={{ border: '1px solid black', padding: '1rem' }}>{modal}</div>
+      <h1>links</h1>
+      <ul>
+        <li>
+          <Link href="/intercepting-siblings">/intercepting-siblings</Link>
+        </li>
+        <li>
+          <Link href="/intercepting-siblings/1">/intercepting-siblings/1</Link>
+        </li>
+        <li>
+          <Link href="/intercepting-siblings/2">/intercepting-siblings/2</Link>
+        </li>
+        <li>
+          <Link href="/intercepting-siblings/3">/intercepting-siblings/3</Link>
+        </li>
+      </ul>
+    </div>
+  )
+}

test/e2e/app-dir/parallel-routes-and-interception/app/intercepting-siblings/page.js

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>main page</div>
+}

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

@@ -751,6 +751,42 @@ createNextDescribe(
           'intercepted'
         )
       })
+
+      it('should support intercepting local dynamic sibling routes', async () => {
+        const browser = await next.browser('/intercepting-siblings')
+
+        await check(
+          () =>
+            browser
+              .elementByCss('[href="/intercepting-siblings/1"]')
+              .click()
+              .waitForElementByCss('#intercepted-sibling')
+              .text(),
+          '1'
+        )
+        await check(
+          () =>
+            browser
+              .elementByCss('[href="/intercepting-siblings/2"]')
+              .click()
+              .waitForElementByCss('#intercepted-sibling')
+              .text(),
+          '2'
+        )
+        await check(
+          () =>
+            browser
+              .elementByCss('[href="/intercepting-siblings/3"]')
+              .click()
+              .waitForElementByCss('#intercepted-sibling')
+              .text(),
+          '3'
+        )
+
+        await next.browser('/intercepting-siblings/1')
+
+        await check(() => browser.waitForElementByCss('#main-slot').text(), '1')
+      })
     })
   }
 )