fix: utm parameters takes precedence over route params (#82)

.nvmrc

@@ -1 +1 @@
-18.17
+18.19

apps/nextjs/app/blog/[slug]/page.tsx

@@ -1,7 +1,8 @@
-export default function Blog({
-  params: { slug },
+export default async function Blog({
+  params,
 }: {
-  params: { slug: string };
+  params: Promise<{ slug: string }>;
 }) {
+  const { slug } = await params;
   return <div>My blog page {slug}</div>;
 }

apps/nextjs/next.config.js

@@ -1,8 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  experimental: {
-    serverActions: true,
-  },
-};
+const nextConfig = {};
 
 module.exports = nextConfig;

apps/nextjs/package.json

@@ -10,9 +10,9 @@
   },
   "dependencies": {
     "@vercel/speed-insights": "workspace:*",
-    "next": "^14.0.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "next": "15.0.1",
+    "react": "19.0.0-rc-69d4b800-20241021",
+    "react-dom": "19.0.0-rc-69d4b800-20241021"
   },
   "devDependencies": {
     "@playwright/test": "1.37.1"

packages/web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vercel/speed-insights",
-  "version": "1.0.14",
+  "version": "1.1.0",
   "description": "Speed Insights is a tool for measuring web performance and providing suggestions for improvement.",
   "keywords": [
     "speed-insights",
@@ -89,6 +89,7 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@remix-run/react": "^2.5.0",
     "@sveltejs/kit": "^2.7",
     "@swc/core": "^1.3.103",

packages/web/src/generic.server.test.ts

@@ -1,4 +1,5 @@
 /** @jest-environment node */
+import { describe, it, expect } from '@jest/globals';
 import { injectSpeedInsights } from './generic';
 
 describe('injectSpeedInsights()', () => {

packages/web/src/generic.test.ts

@@ -1,17 +1,18 @@
+import { describe, it, expect } from '@jest/globals';
 import { injectSpeedInsights } from './generic';
 
 describe('injectSpeedInsights()', () => {
   it('allows no parameters', () => {
     expect(injectSpeedInsights()).toEqual({
-      setRoute: expect.any(Function) as () => void,
+      setRoute: expect.any(Function),
     });
     expectInjectedScript();
   });
 
   it('can set framework', () => {
     const framework = 'sveltekit';
     expect(injectSpeedInsights({ framework })).toEqual({
-      setRoute: expect.any(Function) as () => void,
+      setRoute: expect.any(Function),
     });
     expectInjectedScript({ framework });
   });
@@ -21,13 +22,11 @@ function expectInjectedScript({
   src = 'https://va.vercel-scripts.com/v1/speed-insights/script.debug.js',
   framework = '',
 } = {}): void {
-  const candidateScript = document.querySelector('script');
-  expect(candidateScript).toBeDefined();
-  /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- the previous assertion fails otherwise */
-  const script = candidateScript!;
-  expect(script.defer).toBe(true);
-  expect(script.src).toBe(src);
-  expect(script.dataset.sdkn).toBe(
+  const script = document.querySelector('script');
+  expect(script).toBeDefined();
+  expect(script?.defer).toBe(true);
+  expect(script?.src).toBe(src);
+  expect(script?.dataset.sdkn).toBe(
     `@vercel/speed-insights${framework ? `/${framework}` : ''}`,
   );
 }

packages/web/src/generic.ts

@@ -3,10 +3,10 @@ import { initQueue } from './queue';
 import type { SpeedInsightsProps } from './types';
 import { isBrowser, isDevelopment, computeRoute } from './utils';
 
-const SCRIPT_URL = `https://va.vercel-scripts.com/v1/speed-insights`;
+const SCRIPT_URL = 'https://va.vercel-scripts.com/v1/speed-insights';
 const PROD_SCRIPT_URL = `${SCRIPT_URL}/script.js`;
 const DEV_SCRIPT_URL = `${SCRIPT_URL}/script.debug.js`;
-const PROXY_SCRIPT_URL = `/_vercel/speed-insights/script.js`;
+const PROXY_SCRIPT_URL = '/_vercel/speed-insights/script.js';
 
 /**
  * Injects the Vercel Speed Insights script into the page head and starts tracking page views. Read more in our [documentation](https://vercel.com/docs/speed-insights).

packages/web/src/nextjs/utils.ts

@@ -7,11 +7,13 @@ export const useRoute = (): string | null => {
   const params = useParams();
   const searchParams = useSearchParams() || new URLSearchParams();
   const path = usePathname();
-
-  const finalParams = {
-    ...Object.fromEntries(searchParams.entries()),
-    ...(params || {}),
-  };
-
-  return params ? computeRoute(path, finalParams) : null;
+  // Until we have route parameters, we don't compute the route
+  if (!params) {
+    return null;
+  }
+  // in Next.js@13, useParams() could return an empty object for pages router, and we default to searchParams.
+  const finalParams = Object.keys(params).length
+    ? params
+    : Object.fromEntries(searchParams.entries());
+  return computeRoute(path, finalParams);
 };

packages/web/src/utils.test.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from '@jest/globals';
 import { computeRoute } from './utils';
 
 describe('utils', () => {