From 1ceb5961d7f9a0ed8e2863bad70073d3570e6b24 Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 30 Apr 2026 00:53:12 +0000 Subject: [PATCH] Install Vercel Speed Insights Integration ## Vercel Speed Insights Installation Report Successfully installed and configured Vercel Speed Insights for the match-vault Next.js project. ### Changes Made #### 1. Package Installation - **Added dependency**: `@vercel/speed-insights` version ^2.0.0 - **Package manager**: npm (as indicated by package-lock.json) - Installation completed successfully with 716 packages added #### 2. Code Integration **Modified file**: `src/app/layout.tsx` - **Added import**: `import { SpeedInsights } from "@vercel/speed-insights/next";` - **Added component**: `` component placed inside the `` tag, after the `` component This follows the official Vercel documentation for Next.js v13.5+ applications, which recommends placing the SpeedInsights component at the root layout level. #### 3. Implementation Details The implementation follows the Next.js-specific instructions from the official Vercel Speed Insights quickstart guide (https://vercel.com/docs/speed-insights/quickstart). - Used the Next.js-specific import: `@vercel/speed-insights/next` - Placed the component in the root layout file (`src/app/layout.tsx`) - Component positioned inside `` tag for optimal performance tracking - Preserved all existing code structure and functionality ### Files Modified 1. `package.json` - Added @vercel/speed-insights dependency 2. `package-lock.json` - Updated with new dependency tree 3. `src/app/layout.tsx` - Added SpeedInsights import and component ### Verification - TypeScript compilation passed successfully during build - No syntax or import errors introduced - Existing application structure preserved - Lock files updated correctly ### Next Steps After deployment to Vercel, Speed Insights will automatically start collecting Core Web Vitals metrics. The data can be viewed in the Vercel dashboard under the Speed Insights section. Note: Speed Insights requires the project to be deployed on Vercel to function properly. The component will not collect data in local development mode. Co-authored-by: Vercel --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/app/layout.tsx | 2 ++ 3 files changed, 42 insertions(+) diff --git a/package-lock.json b/package-lock.json index 9673378..f0649db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,6 +18,7 @@ "@prisma/client": "^5.19.0", "@stream-io/node-sdk": "^0.7.56", "@stream-io/video-react-sdk": "^1.35.2", + "@vercel/speed-insights": "^2.0.0", "bcryptjs": "^3.0.2", "cloudinary": "^2.8.0", "clsx": "^2.1.1", @@ -5813,6 +5814,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/abort-controller": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz", diff --git a/package.json b/package.json index 3de4047..602bd21 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@prisma/client": "^5.19.0", "@stream-io/node-sdk": "^0.7.56", "@stream-io/video-react-sdk": "^1.35.2", + "@vercel/speed-insights": "^2.0.0", "bcryptjs": "^3.0.2", "cloudinary": "^2.8.0", "clsx": "^2.1.1", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9334337..1f5012f 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -4,6 +4,7 @@ import Providers from "@/components/Providers"; import TopNav from "@/components/navbar/TopNav"; import { auth } from "@/auth"; import { getUserInfoForNav } from "@/app/actions/userActions"; +import { SpeedInsights } from "@vercel/speed-insights/next"; export const metadata: Metadata = { title: "Match Vault", @@ -41,6 +42,7 @@ export default async function RootLayout({ + );