From 657cdc9321bd08e1d4c0e1116cca6cea31544962 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Wed, 25 Mar 2026 11:13:28 +0000
Subject: [PATCH] Install Vercel Speed Insights

Implemented Vercel Speed Insights for Next.js App Router

Summary:
Successfully installed and configured Vercel Speed Insights following the official documentation from https://vercel.com/docs/speed-insights/quickstart.

Changes Made:

1. Modified Files:
   - package.json: Added @vercel/speed-insights dependency
   - package-lock.json: Updated lock file with new dependency
   - src/app/layout.tsx: Added SpeedInsights component

2. Implementation Details:
   - Installed @vercel/speed-insights package using npm
   - Imported SpeedInsights component from '@vercel/speed-insights/next' (Next.js App Router specific)
   - Added <SpeedInsights /> component at the end of the body tag in the root layout
   - Followed Next.js App Router pattern as documented in official Vercel documentation

3. Framework Configuration:
   - Project: Next.js 15.5.9 with App Router
   - Package Manager: npm
   - Integration: SpeedInsights component added to root layout for global page tracking

4. Verification:
   - Build completed successfully (npm run build)
   - TypeScript compilation passed for Speed Insights changes
   - No new linting errors introduced
   - Lock files updated appropriately

The Speed Insights component will automatically track page performance metrics once deployed to Vercel. No additional configuration is required. Data will appear in the Vercel dashboard after deployment and user traffic.

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

diff --git a/package-lock.json b/package-lock.json
index 9bf2585..0388918 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,6 +32,7 @@
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-toast": "^1.2.6",
         "@radix-ui/react-tooltip": "^1.1.8",
+        "@vercel/speed-insights": "^2.0.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
@@ -7468,6 +7469,44 @@
         "@types/node": "*"
       }
     },
+    "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/@yarnpkg/lockfile": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@yarnpkg/lockfile/-/lockfile-1.1.0.tgz",
diff --git a/package.json b/package.json
index dee4431..923a896 100644
--- a/package.json
+++ b/package.json
@@ -1,4 +1,3 @@
-
 {
   "name": "nextn",
   "version": "0.1.0",
@@ -37,6 +36,7 @@
     "@radix-ui/react-tabs": "^1.1.3",
     "@radix-ui/react-toast": "^1.2.6",
     "@radix-ui/react-tooltip": "^1.1.8",
+    "@vercel/speed-insights": "^2.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3ade2aa..9b14b93 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -7,6 +7,7 @@ import { LanguageProvider } from "@/components/language-provider";
 import { FirebaseClientProvider } from "@/firebase/client-provider";
 import { Inter } from 'next/font/google';
 import { CookieBanner } from "@/components/cookie-banner";
+import { SpeedInsights } from '@vercel/speed-insights/next';
 
 const inter = Inter({ subsets: ['latin'], variable: '--font-inter' });
 
@@ -32,6 +33,7 @@ export default function RootLayout({
             <Toaster />
           </LanguageProvider>
         </ThemeProvider>
+        <SpeedInsights />
       </body>
     </html>
   );