From ee0d552e4aafadfac100d7e4b3e12bb1293f68d5 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Sat, 18 Jul 2026 16:50:48 +0000
Subject: [PATCH] Install and configure Vercel Speed Insights
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Vercel Speed Insights Installation Report

## Summary
Successfully installed and configured Vercel Speed Insights for this Next.js project following the latest official documentation from https://vercel.com/docs/speed-insights/quickstart.

## Changes Made

### 1. Package Installation
- **Added dependency**: `@vercel/speed-insights@^2.0.0`
- **Package manager**: npm (package-lock.json updated)

### 2. Code Configuration
- **Modified file**: `src/frame/pages/app.tsx`
- **Import added**: `import { SpeedInsights } from '@vercel/speed-insights/next'`
- **Component added**: `<SpeedInsights />` component placed after `<Analytics />` in the component tree

## Implementation Details

### Framework Detection
This project uses Next.js with the Pages Router (not App Router). The main app component is located in `src/frame/pages/app.tsx`, which is exported from `src/pages/_app.tsx`.

### Integration Approach
Following the official Vercel documentation for Next.js, the SpeedInsights component was added alongside the existing Analytics component. This placement ensures:
- The component is rendered on all pages
- It follows the same pattern as the existing Vercel Analytics integration
- It's positioned outside the main theme providers to work independently

### Verification Steps Completed
✅ TypeScript type checking passed (`npm run tsc`)
✅ Linting passed (`npm run lint`)
✅ Production build successful (`npm run build`)
✅ No breaking changes introduced

## Next Steps
After deploying this change to Vercel:
1. The Speed Insights tracking script will automatically be injected into pages
2. Performance metrics will begin appearing in the Vercel dashboard under Speed Insights
3. No additional configuration is required

## Notes
- The project already had `@vercel/analytics` installed, so the Speed Insights integration follows the same established pattern
- All dependencies are up to date and compatible
- Lock file (package-lock.json) was properly updated during installation

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 package-lock.json       | 39 +++++++++++++++++++++++++++++++++++++++
 package.json            |  1 +
 src/frame/pages/app.tsx |  2 ++
 3 files changed, 42 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 15bf6fc72697..20cd7033c194 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "@primer/react": "^38.13.0",
         "@primer/react-brand": "^0.70.0",
         "@vercel/analytics": "^2.0.1",
+        "@vercel/speed-insights": "^2.0.0",
         "accept-language-parser": "^1.5.0",
         "ajv": "^8.18.0",
         "ajv-errors": "^3.0.0",
@@ -5255,6 +5256,44 @@
         }
       }
     },
+    "node_modules/@vercel/speed-insights": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-2.0.0.tgz",
+      "integrity": "sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "nuxt": ">= 3",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vitest/expect": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.0.tgz",
diff --git a/package.json b/package.json
index ab76056b3d52..58efedba9565 100644
--- a/package.json
+++ b/package.json
@@ -193,6 +193,7 @@
     "@primer/react": "^38.13.0",
     "@primer/react-brand": "^0.70.0",
     "@vercel/analytics": "^2.0.1",
+    "@vercel/speed-insights": "^2.0.0",
     "accept-language-parser": "^1.5.0",
     "ajv": "^8.18.0",
     "ajv-errors": "^3.0.0",
diff --git a/src/frame/pages/app.tsx b/src/frame/pages/app.tsx
index 799262d74e0f..cbbe920aa548 100644
--- a/src/frame/pages/app.tsx
+++ b/src/frame/pages/app.tsx
@@ -6,6 +6,7 @@ import { ThemeProvider } from '@primer/react'
 import { ThemeProvider as BrandThemeProvider } from '@primer/react-brand'
 import { useRouter } from 'next/router'
 import { Analytics } from '@vercel/analytics/next'
+import { SpeedInsights } from '@vercel/speed-insights/next'
 
 import { initializeEvents } from '@/events/components/events'
 import {
@@ -131,6 +132,7 @@ const MyApp = ({ Component, pageProps, languagesContext, stagingName }: MyAppPro
         </BrandThemeProvider>
       </ThemeProvider>
       <Analytics />
+      <SpeedInsights />
     </>
   )
 }