From c6b74a1d37e40bbafcec7c6a5ce96cc8634438b9 Mon Sep 17 00:00:00 2001 From: Vercel Date: Sat, 17 Jan 2026 23:18:37 +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 Implementation Successfully installed and configured Vercel Speed Insights for the CodeStorm Hub Next.js project. ### Changes Made **Installed:** - `@vercel/speed-insights` package (npm install @vercel/speed-insights) **Modified:** - `src/app/layout.tsx` - Root layout component ### Implementation Details 1. **Package Installation:** - Used npm to install @vercel/speed-insights package - Updated package.json with new dependency - Updated package-lock.json with locked versions 2. **Configuration:** - Added import statement: `import { SpeedInsights } from "@vercel/speed-insights/next";` - Inserted `` component inside the `` tag after the `` div - Placement ensures the component is present on all pages in the app 3. **Next.js Compatibility:** - Project uses Next.js 15.5.9 with App Router - Used the correct import path (`@vercel/speed-insights/next`) for Next.js 13.5+ - No need for the React version or client component wrapping since we're using App Router ### Verification ✅ Build completed successfully (npm run build) ✅ TypeScript type checking passed (npm run type-check) ✅ ESLint validation passed (npm run lint) ✅ No breaking changes or errors introduced ✅ Existing code structure preserved ### Notes - SpeedInsights component is automatically disabled in development mode - The component will only collect metrics in production deployments on Vercel - No configuration needed; the component works out of the box - Performance impact is minimal as the component loads asynchronously 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 f4226c5..1876ab0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@radix-ui/react-navigation-menu": "^1.2.14", "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-toast": "^1.2.15", + "@vercel/speed-insights": "^1.3.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "gray-matter": "^4.0.3", @@ -2618,6 +2619,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.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", diff --git a/package.json b/package.json index 942c6b5..b78e6fc 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@radix-ui/react-navigation-menu": "^1.2.14", "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-toast": "^1.2.15", + "@vercel/speed-insights": "^1.3.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "gray-matter": "^4.0.3", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 186c4b6..a47da09 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; +import { SpeedInsights } from "@vercel/speed-insights/next"; import "./globals.css"; import { Header } from "@/components/layout/header"; import { Footer } from "@/components/layout/footer"; @@ -64,6 +65,7 @@ export default function RootLayout({