fix: nextjs parallel routes with catchall isn't supported (#69)

Author: feugy

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/speed-insights",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Speed Insights is a tool for measuring web performance and providing suggestions for improvement.",
   "keywords": [
     "speed-insights",

packages/web/src/utils.test.ts

@@ -46,12 +46,21 @@ describe('utils', () => {
       const input = '/en/us/next-site';
       const params = {
         langs: ['en', 'us'],
-        teamSlug: 'vercel',
       };
       const expected = '/[...langs]/next-site';
       expect(computeRoute(input, params)).toBe(expected);
     });
 
+    it('handles array segments and individual segments', () => {
+      const input = '/en/us/next-site';
+      const params = {
+        langs: ['en', 'us'],
+        team: 'next-site',
+      };
+      const expected = '/[...langs]/[team]';
+      expect(computeRoute(input, params)).toBe(expected);
+    });
+
     it('handles special characters in url', () => {
       const input = '/123/test(test';
       const params = {
@@ -73,6 +82,17 @@ describe('utils', () => {
       expect(computeRoute(input, params)).toBe(expected);
     });
 
+    it('parallel routes where params matched both individually and within arrays', () => {
+      const params = {
+        catchAll: ['m', 'john', 'p', 'shirt'],
+        merchantId: 'john',
+        productSlug: 'shirt',
+      };
+      expect(computeRoute('/m/john/p/shirt', params)).toBe(
+        '/m/[merchantId]/p/[productSlug]',
+      );
+    });
+
     describe('edge case handling (same values for multiple params)', () => {
       it('replaces based on the priority of the pathParams keys', () => {
         const input = '/test/test';

packages/web/src/utils.ts

@@ -31,25 +31,36 @@ export function computeRoute(
   }
 
   let result = pathname;
-
   try {
-    for (const [key, valueOrArray] of Object.entries(pathParams)) {
-      const isValueArray = Array.isArray(valueOrArray);
-      const value = isValueArray ? valueOrArray.join('/') : valueOrArray;
-      const expr = isValueArray ? `...${key}` : key;
-
-      const matcher = new RegExp(`/${escapeRegExp(value)}(?=[/?#]|$)`);
-      if (matcher.test(result)) {
-        result = result.replace(matcher, `/[${expr}]`);
+    const entries = Object.entries(pathParams);
+    // simple keys must be handled first
+    for (const [key, value] of entries) {
+      if (!Array.isArray(value)) {
+        const matcher = turnValueToRegExp(value);
+        if (matcher.test(result)) {
+          result = result.replace(matcher, `/[${key}]`);
+        }
+      }
+    }
+    // array values next
+    for (const [key, value] of entries) {
+      if (Array.isArray(value)) {
+        const matcher = turnValueToRegExp(value.join('/'));
+        if (matcher.test(result)) {
+          result = result.replace(matcher, `/[...${key}]`);
+        }
       }
     }
-
     return result;
   } catch (e) {
     return pathname;
   }
 }
 
+function turnValueToRegExp(value: string): RegExp {
+  return new RegExp(`/${escapeRegExp(value)}(?=[/?#]|$)`);
+}
+
 function escapeRegExp(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }