make getStaticPaths work with optional catch-all routes (#13559)

Fixes #13524

To do:
- [x] fix dev mode
- [x] there's a ~route ordering or~ trailing slash issue with top level catch-all (current tests reflect that)
- [x] in this test `/get-static-paths/whatever` should fall back to `/[[...optionalName]].js` since `fallback` is `false` in its `getStaticPaths` method. ~Currently seems to 500~ must have been a glitch
- [x] add tests for `null`, `undefined` ~and `false`~ behavior as well (if decided these are valid)
- [x] ~add tests for string params as well~ this is not allowed for catch-all routes
- [x] test behavior when fallback is enabled and a top level catch-all exists

Author: Janpot

packages/next/build/utils.ts

@@ -636,8 +636,17 @@ export async function buildStaticPaths(
       const { params = {} } = entry
       let builtPage = page
       _validParamKeys.forEach((validParamKey) => {
-        const { repeat } = _routeRegex.groups[validParamKey]
-        const paramValue = params[validParamKey]
+        const { repeat, optional } = _routeRegex.groups[validParamKey]
+        let paramValue = params[validParamKey]
+        if (
+          optional &&
+          params.hasOwnProperty(validParamKey) &&
+          (paramValue === null ||
+            paramValue === undefined ||
+            (paramValue as any) === false)
+        ) {
+          paramValue = []
+        }
         if (
           (repeat && !Array.isArray(paramValue)) ||
           (!repeat && typeof paramValue !== 'string')
@@ -648,13 +657,18 @@ export async function buildStaticPaths(
             } in getStaticPaths for ${page}`
           )
         }
-
-        builtPage = builtPage.replace(
-          `[${repeat ? '...' : ''}${validParamKey}]`,
-          repeat
-            ? (paramValue as string[]).map(encodeURIComponent).join('/')
-            : encodeURIComponent(paramValue as string)
-        )
+        let replaced = `[${repeat ? '...' : ''}${validParamKey}]`
+        if (optional) {
+          replaced = `[${replaced}]`
+        }
+        builtPage = builtPage
+          .replace(
+            replaced,
+            repeat
+              ? (paramValue as string[]).map(encodeURIComponent).join('/')
+              : encodeURIComponent(paramValue as string)
+          )
+          .replace(/(?!^)\/$/, '')
       })
 
       prerenderPaths?.add(builtPage)

packages/next/export/worker.ts

@@ -348,7 +348,7 @@ export default async function exportPage({
   } catch (error) {
     console.error(
       `\nError occurred prerendering page "${path}". Read more: https://err.sh/next.js/prerender-error\n` +
-        error
+        error.stack
     )
     return { ...results, error: true }
   }

packages/next/next-server/lib/router/utils/route-regex.ts

@@ -9,12 +9,16 @@ export function getRouteRegex(
 ): {
   re: RegExp
   namedRegex?: string
-  groups: { [groupName: string]: { pos: number; repeat: boolean } }
+  groups: {
+    [groupName: string]: { pos: number; repeat: boolean; optional: boolean }
+  }
 } {
   // Escape all characters that could be considered RegEx
   const escapedRoute = escapeRegex(normalizedRoute.replace(/\/$/, '') || '/')
 
-  const groups: { [groupName: string]: { pos: number; repeat: boolean } } = {}
+  const groups: {
+    [groupName: string]: { pos: number; repeat: boolean; optional: boolean }
+  } = {}
   let groupIndex = 1
 
   const parameterizedRoute = escapedRoute.replace(
@@ -33,7 +37,7 @@ export function getRouteRegex(
           // Un-escape key
           .replace(/\\([|\\{}()[\]^$+*?.-])/g, '$1')
         // eslint-disable-next-line no-sequences
-      ] = { pos: groupIndex++, repeat: isCatchAll }
+      ] = { pos: groupIndex++, repeat: isCatchAll, optional: isOptional }
       return isCatchAll ? (isOptional ? '(?:/(.+?))?' : '/(.+?)') : '/([^/]+?)'
     }
   )

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

@@ -983,6 +983,9 @@ export default class Server {
       ? (req as any)._nextRewroteUrl
       : `${parseUrl(req.url || '').pathname!}`
 
+    // remove trailing slash
+    urlPathname = urlPathname.replace(/(?!^)\/$/, '')
+
     // remove /_next/data prefix from urlPathname so it matches
     // for direct page visit and /_next/data visit
     if (isDataReq && urlPathname.includes(this.buildId)) {

test/integration/dynamic-optional-routing/pages/[[...optionalName]].js

@@ -8,11 +8,11 @@ export async function getServerSideProps({ query }) {
 
 export default function Page(props) {
   return (
-    <div id="optional-route">
+    <div id="route">
       top level route param:{' '}
       {props.query.optionalName === undefined
         ? 'undefined'
-        : `[${props.query.optionalName.join(',')}]`}
+        : `[${props.query.optionalName.join('|')}]`}
     </div>
   )
 }

test/integration/dynamic-optional-routing/pages/get-static-paths-fallback/[[...slug]].js

@@ -0,0 +1,35 @@
+import { useRouter } from 'next/router'
+
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: { slug: [] },
+      },
+      {
+        params: { slug: ['p1'] },
+      },
+      {
+        params: { slug: ['p2', 'p3'] },
+      },
+    ],
+    fallback: true,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  return { props: { params } }
+}
+
+export default function Index(props) {
+  const router = useRouter()
+  return (
+    <div id="route">
+      gsp fallback route:{' '}
+      {props.params?.slug === undefined
+        ? 'undefined'
+        : `[${props.params.slug.join('|')}]`}
+      {router.isFallback ? ' is fallback' : ' is not fallback'}
+    </div>
+  )
+}

test/integration/dynamic-optional-routing/pages/get-static-paths-false/[[...slug]].js

@@ -0,0 +1,25 @@
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: { slug: false },
+      },
+    ],
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  return { props: { params } }
+}
+
+export default function Index(props) {
+  return (
+    <div id="route">
+      gsp false route:{' '}
+      {props.params.slug === undefined
+        ? 'undefined'
+        : `[${props.params.slug.join('|')}]`}
+    </div>
+  )
+}

test/integration/dynamic-optional-routing/pages/get-static-paths-null/[[...slug]].js

@@ -0,0 +1,25 @@
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: { slug: null },
+      },
+    ],
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  return { props: { params } }
+}
+
+export default function Index(props) {
+  return (
+    <div id="route">
+      gsp null route:{' '}
+      {props.params.slug === undefined
+        ? 'undefined'
+        : `[${props.params.slug.join('|')}]`}
+    </div>
+  )
+}

test/integration/dynamic-optional-routing/pages/get-static-paths-undefined/[[...slug]].js

@@ -0,0 +1,25 @@
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: { slug: undefined },
+      },
+    ],
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  return { props: { params } }
+}
+
+export default function Index(props) {
+  return (
+    <div id="route">
+      gsp undefined route:{' '}
+      {props.params.slug === undefined
+        ? 'undefined'
+        : `[${props.params.slug.join('|')}]`}
+    </div>
+  )
+}

test/integration/dynamic-optional-routing/pages/get-static-paths/[[...slug]].js

@@ -0,0 +1,31 @@
+export async function getStaticPaths() {
+  return {
+    paths: [
+      {
+        params: { slug: [] },
+      },
+      {
+        params: { slug: ['p1'] },
+      },
+      {
+        params: { slug: ['p2', 'p3'] },
+      },
+    ],
+    fallback: false,
+  }
+}
+
+export async function getStaticProps({ params }) {
+  return { props: { params } }
+}
+
+export default function Index(props) {
+  return (
+    <div id="route">
+      gsp route:{' '}
+      {props.params.slug === undefined
+        ? 'undefined'
+        : `[${props.params.slug.join('|')}]`}
+    </div>
+  )
+}