From 5502798a3bce0d1e84224e92141a436056e341ec Mon Sep 17 00:00:00 2001 From: Vercel Date: Sun, 25 Jan 2026 12:23:42 +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 and Configuration Successfully installed and configured Vercel Speed Insights for the Next.js project. ### Changes Made: 1. **Installed @vercel/speed-insights package** - Added `@vercel/speed-insights@^1.3.1` to dependencies - Updated package.json and package-lock.json 2. **Modified app/layout.tsx** - Added import: `import { SpeedInsights } from "@vercel/speed-insights/next"` - Added `` component inside the `` tag, placed after the `` closing tag - This follows the recommended placement for Next.js 14.2.5 with App Router ### Implementation Details: The project is using Next.js 14.2.5 with the App Router architecture, so the implementation followed the standard approach for Next.js 13.5+: - Used the `@vercel/speed-insights/next` import (not the React version) - No client component or `usePathname()` hook needed - Simple declarative component placement in the root layout ### Verification: ✅ Build completed successfully (`npm run build`) ✅ TypeScript type checking passed (`npm run type-check`) ✅ No build errors or warnings introduced ✅ All changes staged with git ### Files Modified: - `app/layout.tsx` - Added SpeedInsights import and component - `package.json` - Added @vercel/speed-insights dependency - `package-lock.json` - Updated with new package and dependencies The Speed Insights component will now track and report Core Web Vitals metrics when the application is deployed to Vercel. Co-authored-by: Vercel --- app/layout.tsx | 2 ++ package-lock.json | 35 +++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 38 insertions(+) diff --git a/app/layout.tsx b/app/layout.tsx index 9ced8d1f..bd38842f 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,7 @@ import Script from "next/script"; import "./globals.css"; import { Providers } from "./providers"; import CookieConsent from "@/components/CookieConsent"; +import { SpeedInsights } from "@vercel/speed-insights/next"; export const metadata: Metadata = { title: "Turn Video into Production-Ready Code | Replay.build", @@ -122,6 +123,7 @@ export default function RootLayout({ {children} + ); diff --git a/package-lock.json b/package-lock.json index 04470a4b..6683ecdd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15,6 +15,7 @@ "@supabase/ssr": "^0.8.0", "@supabase/supabase-js": "^2.89.0", "@types/react-syntax-highlighter": "^15.5.13", + "@vercel/speed-insights": "^1.3.1", "class-variance-authority": "^0.7.1", "cloudinary": "^2.8.0", "clsx": "^2.1.1", @@ -608,6 +609,40 @@ "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==", "license": "ISC" }, + "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/any-promise": { "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", diff --git a/package.json b/package.json index 414cb813..f3c62ac2 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@supabase/ssr": "^0.8.0", "@supabase/supabase-js": "^2.89.0", "@types/react-syntax-highlighter": "^15.5.13", + "@vercel/speed-insights": "^1.3.1", "class-variance-authority": "^0.7.1", "cloudinary": "^2.8.0", "clsx": "^2.1.1",