From 7fc8693b26a6e6aa854b5542fc572b288238e363 Mon Sep 17 00:00:00 2001 From: Vercel Date: Sat, 17 Jan 2026 23:25:03 +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 integration for Next.js WHAT WAS IMPLEMENTED: Successfully installed and configured Vercel Speed Insights for the CodeStorm Hub Next.js project (version 15.5.9 with App Router). CHANGES MADE: 1. Package Installation - Installed @vercel/speed-insights@^1.3.1 via npm - Updated package.json with new dependency - Updated package-lock.json to lock dependency versions 2. Root Layout Configuration (src/app/layout.tsx) - Added import: `import { SpeedInsights } from "@vercel/speed-insights/next";` - Added `` component inside the tag, positioned after the Analytics component - Component placement ensures it can track Core Web Vitals and other performance metrics IMPLEMENTATION DETAILS: - Used the '@vercel/speed-insights/next' import (appropriate for Next.js 13.5+ with App Router) - Placed the SpeedInsights component within the body tag as recommended, after the existing Analytics component - Maintained existing code structure and preserved all other functionality - No changes required to existing components or configuration VERIFICATION COMPLETED: ✓ Type checking passed (npm run type-check) ✓ Linting passed (npm run lint) ✓ Production build successful (npm run build) - all 22 pages generated successfully ✓ No errors or warnings introduced NOTES: - The project already had Vercel Analytics (@vercel/analytics) installed, so the Speed Insights integration complements the existing monitoring setup - Speed Insights will automatically collect performance data and send it to the Vercel dashboard - The component is production-ready and requires no additional configuration 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 88f4f80..0bef46b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-toast": "^1.2.15", "@vercel/analytics": "^1.6.1", + "@vercel/speed-insights": "^1.3.1", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "gray-matter": "^4.0.3", @@ -2657,6 +2658,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/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 c954131..184473a 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-toast": "^1.2.15", "@vercel/analytics": "^1.6.1", + "@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 8ba5a06..25affef 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./globals.css"; import { Analytics } from "@vercel/analytics/next"; +import { SpeedInsights } from "@vercel/speed-insights/next"; import { Header } from "@/components/layout/header"; import { Footer } from "@/components/layout/footer"; import { SkipLinks } from "@/components/ui/skip-links"; @@ -66,6 +67,7 @@ export default function RootLayout({ + );