From afba7ac4bf0986dc338dd977ae028ced4bc7ff1d Mon Sep 17 00:00:00 2001 From: Vercel Date: Mon, 13 Jul 2026 09:47:30 +0000 Subject: [PATCH] Install Vercel Speed Insights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Vercel Speed Insights Installation Report Successfully installed and configured Vercel Speed Insights for the Next.js project. ## Changes Made ### 1. Package Installation - **File**: `web/package.json` - **Action**: Added `@vercel/speed-insights` dependency - **Version**: Latest version installed via npm ### 2. Configuration - **File**: `web/src/app/layout.tsx` - **Changes**: - Added import: `import { SpeedInsights } from "@vercel/speed-insights/next";` - Added `` component at the end of the body tag, after the ThemeProvider wrapper ### 3. Lock File Update - **File**: `web/package-lock.json` - **Action**: Updated to reflect the new @vercel/speed-insights dependency and its transitive dependencies ## Implementation Details The implementation follows the official Vercel Speed Insights documentation for Next.js App Router (fetched from https://vercel.com/docs/speed-insights/quickstart): 1. **Framework**: Next.js 16.2.10 with App Router 2. **Package Manager**: npm (as identified from existing package-lock.json) 3. **Integration Point**: Root layout file (`web/src/app/layout.tsx`) 4. **Component Placement**: The `` component was placed at the end of the `` tag, after the ThemeProvider wrapper, following Next.js best practices for analytics components ## Verification All verification steps completed successfully: ✅ **TypeScript Type Check**: Passed with no errors ✅ **Production Build**: Compiled successfully (15.7s compile time, all 20 pages generated) ✅ **ESLint**: No linting errors (max-warnings=0) ✅ **Code Structure**: Preserved existing imports, providers, and component hierarchy ## Next Steps To enable Speed Insights data collection: 1. Enable Speed Insights in your Vercel dashboard (select your project → Speed Insights → Enable) 2. Deploy the application to Vercel 3. After deployment, verify the Speed Insights script loads in the browser 4. Performance metrics will appear in the dashboard after users visit the site ## Notes - The SpeedInsights component is placed after all content providers to ensure it doesn't interfere with the application's rendering - The component is client-side only and will not affect server-side rendering - No additional configuration is required beyond adding the component to the root layout Co-authored-by: Vercel --- web/package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ web/package.json | 1 + web/src/app/layout.tsx | 2 ++ 3 files changed, 42 insertions(+) diff --git a/web/package-lock.json b/web/package-lock.json index 18309ecc..2aaab46c 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -13,6 +13,7 @@ "@mdx-js/react": "^3.1.1", "@next/mdx": "16.2.10", "@types/mdx": "^2.0.13", + "@vercel/speed-insights": "^2.0.0", "class-variance-authority": "^0.7.1", "embla-carousel-react": "^8.6.0", "lucide-react": "^0.562.0", @@ -2462,6 +2463,44 @@ "win32" ] }, + "node_modules/@vercel/speed-insights": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-2.0.0.tgz", + "integrity": "sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==", + "license": "Apache-2.0", + "peerDependencies": { + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "nuxt": ">= 3", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "nuxt": { + "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/web/package.json b/web/package.json index fc128258..629e7199 100644 --- a/web/package.json +++ b/web/package.json @@ -15,6 +15,7 @@ "@mdx-js/react": "^3.1.1", "@next/mdx": "16.2.10", "@types/mdx": "^2.0.13", + "@vercel/speed-insights": "^2.0.0", "class-variance-authority": "^0.7.1", "embla-carousel-react": "^8.6.0", "lucide-react": "^0.562.0", diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx index 81d49933..6c50f5fc 100644 --- a/web/src/app/layout.tsx +++ b/web/src/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata, Viewport } from "next"; import "./globals.css"; import { ThemeProvider } from "@/components/theme-provider"; import { I18nProvider } from "@/i18n/provider"; +import { SpeedInsights } from "@vercel/speed-insights/next"; export const viewport: Viewport = { themeColor: [ @@ -61,6 +62,7 @@ export default function RootLayout({ > {children} + );