Fix Nested Index Dynamic Routes in Development

packages/next/server/next-dev-server.ts

@@ -140,6 +140,10 @@ export default class DevServer extends Server {
       return
     }
 
+    const regexPageExtension = new RegExp(
+      `\\.+(?:${this.nextConfig.pageExtensions.join('|')})$`
+    )
+
     let resolved = false
     return new Promise(resolve => {
       const pagesDir = this.pagesDir
@@ -163,18 +167,13 @@ export default class DevServer extends Server {
         const dynamicRoutedPages = []
         const knownFiles = wp.getTimeInfoEntries()
         for (const [fileName, { accuracy }] of knownFiles) {
-          if (accuracy === undefined) {
+          if (accuracy === undefined || !regexPageExtension.test(fileName)) {
             continue
           }
 
           let pageName =
             '/' + relative(pagesDir!, fileName).replace(/\\+/g, '/')
-
-          pageName = pageName.replace(
-            new RegExp(`\\.+(?:${this.nextConfig.pageExtensions.join('|')})$`),
-            ''
-          )
-
+          pageName = pageName.replace(regexPageExtension, '')
           pageName = pageName.replace(/\/index$/, '') || '/'
 
           if (!isDynamicRoute(pageName)) {

test/integration/dynamic-routing/pages/index.js

@@ -44,6 +44,18 @@ const Page = () => (
     <Link href="/p1/p2/all-ssg/[...rest]" as="/p1/p2/all-ssg/hello1/hello2">
       <a id="ssg-catch-all-multi">Catch-all route (multi)</a>
     </Link>
+    <Link
+      href="/p1/p2/nested-all-ssg/[...rest]"
+      as="/p1/p2/nested-all-ssg/hello"
+    >
+      <a id="nested-ssg-catch-all-single">Nested Catch-all route (single)</a>
+    </Link>
+    <Link
+      href="/p1/p2/nested-all-ssg/[...rest]"
+      as="/p1/p2/nested-all-ssg/hello1/hello2"
+    >
+      <a id="nested-ssg-catch-all-multi">Nested Catch-all route (multi)</a>
+    </Link>
   </div>
 )
 

test/integration/dynamic-routing/pages/p1/p2/nested-all-ssg/[...rest]/index.js

@@ -0,0 +1,15 @@
+import styles from './styles.module.css'
+
+function All({ params }) {
+  return (
+    <div id="nested-all-ssg-content" className={styles.test}>
+      {JSON.stringify(params)}
+    </div>
+  )
+}
+
+export function unstable_getStaticProps({ params }) {
+  return { props: { params } }
+}
+
+export default All

test/integration/dynamic-routing/pages/p1/p2/nested-all-ssg/[...rest]/styles.module.css

@@ -0,0 +1,3 @@
+.test {
+  color: red;
+}

test/integration/dynamic-routing/test/index.test.js

@@ -257,6 +257,24 @@ function runTests(dev) {
     })
   })
 
+  it('[nested ssg: catch all] should pass param in getStaticProps during SSR', async () => {
+    const data = await renderViaHTTP(
+      appPort,
+      `/_next/data/${buildId}/p1/p2/nested-all-ssg/test1.json`
+    )
+    expect(JSON.parse(data).pageProps.params).toEqual({ rest: ['test1'] })
+  })
+
+  it('[nested ssg: catch all] should pass params in getStaticProps during SSR', async () => {
+    const data = await renderViaHTTP(
+      appPort,
+      `/_next/data/${buildId}/p1/p2/nested-all-ssg/test1/test2.json`
+    )
+    expect(JSON.parse(data).pageProps.params).toEqual({
+      rest: ['test1', 'test2'],
+    })
+  })
+
   it('[predefined ssg: catch all] should pass param in getStaticProps during SSR', async () => {
     const data = await renderViaHTTP(
       appPort,
@@ -321,6 +339,34 @@ function runTests(dev) {
     }
   })
 
+  it('[nested ssg: catch-all] should pass params in getStaticProps during client navigation (single)', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/')
+      await browser.elementByCss('#nested-ssg-catch-all-single').click()
+      await browser.waitForElementByCss('#nested-all-ssg-content')
+
+      const text = await browser.elementByCss('#nested-all-ssg-content').text()
+      expect(text).toBe('{"rest":["hello"]}')
+    } finally {
+      if (browser) await browser.close()
+    }
+  })
+
+  it('[nested ssg: catch-all] should pass params in getStaticProps during client navigation (multi)', async () => {
+    let browser
+    try {
+      browser = await webdriver(appPort, '/')
+      await browser.elementByCss('#nested-ssg-catch-all-multi').click()
+      await browser.waitForElementByCss('#nested-all-ssg-content')
+
+      const text = await browser.elementByCss('#nested-all-ssg-content').text()
+      expect(text).toBe('{"rest":["hello1","hello2"]}')
+    } finally {
+      if (browser) await browser.close()
+    }
+  })
+
   it('should update dynamic values on mount', async () => {
     const html = await renderViaHTTP(appPort, '/on-mount/post-1')
     expect(html).toMatch(/onmpost:.*pending/)