From 97e74f8202eb2c96e4432c00b7768a9c8a93a4a3 Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 9 Jun 2026 02:42:10 +0000 Subject: [PATCH] Install 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 the watch-tracker Next.js project following the latest official documentation from Vercel. ## Changes Made ### 1. Package Installation - Installed `@vercel/speed-insights` version 2.0.0 - Added package to dependencies in `package.json` - Updated `package-lock.json` with new dependency tree ### 2. Code Configuration Modified `app/layout.tsx`: - Added import statement: `import { SpeedInsights } from "@vercel/speed-insights/next"` - Added `` component within the `` tag, placed after the main content div - Component placement follows Vercel's recommended best practice for Next.js App Router projects ## Files Modified - `app/layout.tsx` - Added SpeedInsights import and component - `package.json` - Added @vercel/speed-insights to dependencies - `package-lock.json` - Updated with new package installation ## Implementation Details The implementation follows the official Vercel Speed Insights quickstart guide for Next.js v13.5+ (App Router): - Used the framework-specific `/next` export path for optimal integration - Placed the component in the root layout for app-wide analytics tracking - No additional client component wrapper needed as the package handles SSR automatically ## Verification ✅ Build completed successfully with no errors ✅ TypeScript compilation passed ✅ ESLint passed with no warnings ✅ All dependencies installed correctly ✅ Lock files updated properly ## Next Steps for Deployment To fully enable Speed Insights, the project owner needs to: 1. Deploy this code to Vercel 2. Navigate to the Vercel dashboard → Speed Insights section 3. Click "Enable" to activate the tracking routes The Speed Insights component will automatically start collecting and reporting performance metrics once enabled in the Vercel dashboard. Co-authored-by: Vercel --- app/layout.tsx | 2 ++ package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 42 insertions(+) diff --git a/app/layout.tsx b/app/layout.tsx index 2efd40c..edef1ac 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from "next"; +import { SpeedInsights } from "@vercel/speed-insights/next"; import { SiteHeader } from "@/components/site-header"; import "./globals.css"; @@ -56,6 +57,7 @@ export default function RootLayout({ {children} + ); diff --git a/package-lock.json b/package-lock.json index 206b157..6e1071f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@prisma/client": "^7.8.0", "@supabase/ssr": "^0.10.3", "@supabase/supabase-js": "^2.101.1", + "@vercel/speed-insights": "^2.0.0", "next": "^16.2.7", "prisma": "^7.8.0", "react": "19.2.7", @@ -2750,6 +2751,44 @@ "win32" ] }, + "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/acorn": { "version": "8.16.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", diff --git a/package.json b/package.json index d224d8a..66f90c0 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "@prisma/client": "^7.8.0", "@supabase/ssr": "^0.10.3", "@supabase/supabase-js": "^2.101.1", + "@vercel/speed-insights": "^2.0.0", "next": "^16.2.7", "prisma": "^7.8.0", "react": "19.2.7",