From bcda371b1c204f1676ede0652407b2758ca29836 Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 17 Feb 2026 14:35:49 +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 Implemented Vercel Speed Insights for Next.js =============================================== Successfully installed and configured @vercel/speed-insights for the Next.js App Router project. Changes Made: ------------- 1. **Installed Package**: - Added @vercel/speed-insights@^1.3.1 to project dependencies using npm 2. **Modified Files**: - package.json: Added @vercel/speed-insights dependency - package-lock.json: Updated with new dependency and its transitive dependencies - src/app/layout.tsx: * Added import: `import { SpeedInsights } from "@vercel/speed-insights/next"` * Added `` component inside the `` tag, after `` Implementation Details: ----------------------- This project uses Next.js 16.1.6 with the App Router architecture. Following best practices: - Used the '@vercel/speed-insights/next' import path (appropriate for Next.js 13.5+ with App Router) - Placed the component in the root layout (src/app/layout.tsx) - Positioned it inside the tag after the existing component - No additional configuration needed - the component works out of the box Verification: ------------- ✓ Package installed successfully (378 packages added, 0 vulnerabilities) ✓ Build completed successfully - no compilation errors ✓ TypeScript checks passed ✓ No new linting errors introduced (existing lint issues in other files are pre-existing) ✓ All lock files updated appropriately The implementation preserves all existing code structure and follows the project's patterns, placing Speed Insights alongside the existing Vercel Analytics component. 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 c3b9dfb..00ba4c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.1.0", "dependencies": { "@vercel/analytics": "^1.6.1", + "@vercel/speed-insights": "^1.3.1", "next": "16.1.6", "react": "19.2.3", "react-dom": "19.2.3", @@ -2234,6 +2235,40 @@ } } }, + "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/abitype": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/abitype/-/abitype-1.2.3.tgz", diff --git a/package.json b/package.json index f41880c..bc687a3 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@vercel/analytics": "^1.6.1", + "@vercel/speed-insights": "^1.3.1", "next": "16.1.6", "react": "19.2.3", "react-dom": "19.2.3", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index cf92641..99efd2b 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata, Viewport } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import { Analytics } from "@vercel/analytics/react"; +import { SpeedInsights } from "@vercel/speed-insights/next"; import { ThemeProvider } from "@/components/ThemeProvider"; import "./globals.css"; @@ -56,6 +57,7 @@ export default function RootLayout({ > {children} + );