[next] Update dynamic route named regexes and route keys (#4355)

This updates to leverage changes from vercel/next.js#12801 which resolves invalid named regexes being used when the segments contain non-word characters e.g. `/[hello-world]`. 

Failing page names have also been added to the `23-custom-routes-verbose` fixture. Since the routeKeys aren't applied for dynamic routes in this PR until the routes-manifest version is bumped in the latest canary of Next.js the added test cases will be passing now and should be re-run to ensure passing after a new canary of Next.js is released with the routes-manifest version bump

src/index.ts

@@ -432,7 +432,8 @@ export const build = async ({
   if (routesManifest) {
     switch (routesManifest.version) {
       case 1:
-      case 2: {
+      case 2:
+      case 3: {
         redirects.push(...convertRedirects(routesManifest.redirects));
         rewrites.push(...convertRewrites(routesManifest.rewrites));
 
@@ -468,7 +469,14 @@ export const build = async ({
                 // make sure to route SSG data route to the data prerender
                 // output, we don't do this for SSP routes since they don't
                 // have a separate data output
-                (ssgDataRoute && ssgDataRoute.dataRoute) || dataRoute.page
+                (ssgDataRoute && ssgDataRoute.dataRoute) || dataRoute.page,
+                `${
+                  dataRoute.routeKeys
+                    ? `?${Object.keys(dataRoute.routeKeys)
+                        .map(key => `${dataRoute.routeKeys![key]}=$${key}`)
+                        .join('&')}`
+                    : ''
+                }`
               ),
               check: true,
             });

src/utils.ts

@@ -312,9 +312,16 @@ export type RoutesManifest = {
   dynamicRoutes: {
     page: string;
     regex: string;
+    namedRegex?: string;
+    routeKeys?: { [named: string]: string };
   }[];
   version: number;
-  dataRoutes?: Array<{ page: string; dataRouteRegex: string }>;
+  dataRoutes?: Array<{
+    page: string;
+    dataRouteRegex: string;
+    namedDataRouteRegex?: string;
+    routeKeys?: { [named: string]: string };
+  }>;
 };
 
 export async function getRoutesManifest(
@@ -352,6 +359,20 @@ export async function getRoutesManifest(
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const routesManifest: RoutesManifest = require(pathRoutesManifest);
 
+  // massage temporary array based routeKeys from v1/v2 of routes
+  // manifest into new object based
+  for (const route of [
+    ...(routesManifest.dataRoutes || []),
+    ...(routesManifest.dynamicRoutes || []),
+  ]) {
+    if (Array.isArray(route.routeKeys)) {
+      route.routeKeys = route.routeKeys.reduce((prev, cur) => {
+        prev[cur] = cur;
+        return prev;
+      }, {});
+    }
+  }
+
   return routesManifest;
 }
 
@@ -383,6 +404,25 @@ export async function getDynamicRoutes(
             };
           });
       }
+      case 3: {
+        return routesManifest.dynamicRoutes
+          .filter(({ page }) =>
+            omittedRoutes ? !omittedRoutes.has(page) : true
+          )
+          .map(({ page, namedRegex, regex, routeKeys }) => {
+            return {
+              src: namedRegex || regex,
+              dest: `${!isDev ? path.join('/', entryDirectory, page) : page}${
+                routeKeys
+                  ? `?${Object.keys(routeKeys)
+                      .map(key => `${routeKeys[key]}=$${key}`)
+                      .join('&')}`
+                  : ''
+              }`,
+              check: true,
+            };
+          });
+      }
       default: {
         // update MIN_ROUTES_MANIFEST_VERSION
         throw new NowBuildError({

test/fixtures/10-export-cache-headers/now.json

@@ -3,7 +3,7 @@
   "builds": [{ "src": "package.json", "use": "@vercel/next" }],
   "probes": [
     {
-      "path": "/_next/static/testing-build-id/pages/index.js",
+      "path": "/_next/static/9dc4d2c93491d81eead3/pages/index.js",
       "responseHeaders": {
         "cache-control": "public,max-age=31536000,immutable"
       }

test/fixtures/16-base-path/now.json

@@ -3,7 +3,7 @@
   "builds": [{ "src": "package.json", "use": "@vercel/next" }],
   "probes": [
     {
-      "path": "/docs/_next/static/testing-build-id/pages/index.js",
+      "path": "/docs/_next/static/a7184ed7301386fd6825/pages/index.js",
       "responseHeaders": {
         "cache-control": "public,max-age=31536000,immutable"
       }

test/fixtures/23-custom-routes-verbose/now.json

@@ -182,7 +182,7 @@
 
     // should match /_next file after rewrite
     {
-      "path": "/hidden/_next/static/testing-build-id/pages/hello.js",
+      "path": "/hidden/_next/static/b09092d6eebe375caba5/pages/hello.js",
       "mustContain": "createElement"
     },
 
@@ -245,6 +245,13 @@
       "path": "/hello/post-123.html",
       "status": 200,
       "mustContain": "123"
+    },
+
+    // should rewrite to catch-all with dash in segment name
+    {
+      "path": "/catchall-dash/hello/world",
+      "status": 200,
+      "mustContain": "hello/world"
     }
   ]
 }

test/fixtures/23-custom-routes-verbose/pages/catchall-dash/[...hello-world].js

@@ -0,0 +1,17 @@
+import { useRouter } from 'next/router'
+
+const Page = () => {
+  return (
+    <p>path: {useRouter().query['hello-world']?.join('/')}</p>
+  )
+}
+
+export default Page
+
+export const getServerSideProps = () => {
+  return {
+    props: {
+      hello: 'world'
+    }
+  }
+}

test/fixtures/23-custom-routes-verbose/pages/dash/[hello-world].js

@@ -0,0 +1 @@
+export default () => 'hi'