From c37404a8d5d50097ec8d28681f6fefc8c50c4329 Mon Sep 17 00:00:00 2001 From: Vercel Date: Wed, 4 Mar 2026 00:13:39 +0000 Subject: [PATCH] Add Vercel Speed Insights to Next.js 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 Next.js 16.1.6 portfolio project using the App Router. ## Changes Made ### 1. Package Installation - Installed `@vercel/speed-insights` version 1.3.1 - Updated package.json to include the new dependency - Updated package-lock.json with the complete dependency tree (368 packages added) ### 2. Configuration (src/app/layout.tsx) - Added import statement: `import { SpeedInsights } from "@vercel/speed-insights/next";` - Placed the `` component inside the `` tag after `{children}` - This placement ensures Speed Insights tracks all pages in the application ## Implementation Details Since this is a Next.js 16.1.6 project (well above 13.5), I used the recommended App Router configuration: - Imported from `@vercel/speed-insights/next` (not the React version) - Added the component to the root layout (app/layout.tsx) - No additional client component or route prop configuration needed ## Verification ✓ Build completed successfully with no errors ✓ Linter passed with no issues ✓ TypeScript compilation successful ✓ All dependencies properly resolved ## Files Modified - `package.json` - Added @vercel/speed-insights dependency - `package-lock.json` - Updated with new dependency tree - `src/app/layout.tsx` - Added SpeedInsights component The Speed Insights component will now automatically track Core Web Vitals and performance metrics when the application is deployed to Vercel. Co-authored-by: Vercel --- package-lock.json | 35 +++++++++++++++++++++++++++++++++++ package.json | 1 + src/app/layout.tsx | 2 ++ 3 files changed, 38 insertions(+) diff --git a/package-lock.json b/package-lock.json index b9d3796..9878f1e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "portfolio", "version": "0.1.0", "dependencies": { + "@vercel/speed-insights": "^1.3.1", "lucide-react": "^0.576.0", "next": "16.1.6", "react": "19.2.3", @@ -2140,6 +2141,40 @@ "win32" ] }, + "node_modules/@vercel/speed-insights": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.3.1.tgz", + "integrity": "sha512-PbEr7FrMkUrGYvlcLHGkXdCkxnylCWePx7lPxxq36DNdfo9mcUjLOmqOyPDHAOgnfqgGGdmE3XI9L/4+5fr+vQ==", + "license": "Apache-2.0", + "peerDependencies": { + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@sveltejs/kit": { + "optional": true + }, + "next": { + "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 ed851ab..0cef4c9 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "eslint" }, "dependencies": { + "@vercel/speed-insights": "^1.3.1", "lucide-react": "^0.576.0", "next": "16.1.6", "react": "19.2.3", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 280d0b0..ef1ab9a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import { Inter, JetBrains_Mono } from "next/font/google"; +import { SpeedInsights } from "@vercel/speed-insights/next"; import "./globals.css"; const inter = Inter({ @@ -48,6 +49,7 @@ export default function RootLayout({ className={`${inter.variable} ${jetbrainsMono.variable} antialiased`} > {children} + );