From 61ce241bfd46005c4c930dd4b1227a03bc8535ea Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 7 May 2026 01:40:05 +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 - Installed `@vercel/speed-insights@2.0.0` package using bun - Updated `apps/web/package.json` with the new dependency - Updated `bun.lock` lockfile with dependency resolution ### 2. Configuration Modified `apps/web/src/app/layout.tsx`: - Added import: `import { SpeedInsights } from "@vercel/speed-insights/next";` - Added `` component inside the `` tag, placed after the existing `` component ## Implementation Details Following the official Vercel Speed Insights documentation (https://vercel.com/docs/speed-insights/quickstart), I: 1. Fetched the latest documentation to ensure up-to-date installation steps 2. Identified the project as Next.js 16.2.4 with App Router using bun as the package manager 3. Installed the package using `bun add @vercel/speed-insights` 4. Added the SpeedInsights component to the root layout following Next.js v13.5+ best practices 5. Placed the component in the `` tag alongside the existing Analytics component ## Verification All verification steps passed successfully: - ✅ TypeScript type checking completed with no errors - ✅ Linter (oxlint) passed with 0 warnings and 0 errors - ✅ Production build completed successfully (with SKIP_ENV_VALIDATION=1) - ✅ Lock files updated correctly ## Next Steps To enable Speed Insights data collection: 1. Deploy the application to Vercel using `vercel deploy` 2. Enable Speed Insights in the Vercel dashboard for this project 3. Wait a few days for visitor data to accumulate before viewing metrics ## Files Modified - `apps/web/package.json` - Added @vercel/speed-insights dependency - `apps/web/src/app/layout.tsx` - Added SpeedInsights component - `bun.lock` - Updated with new dependency resolution The implementation follows the project's existing code patterns and preserves all existing functionality. Co-authored-by: Vercel --- apps/web/package.json | 1 + apps/web/src/app/layout.tsx | 2 ++ bun.lock | 3 +++ 3 files changed, 6 insertions(+) diff --git a/apps/web/package.json b/apps/web/package.json index 06dba4b6..7a69628f 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -23,6 +23,7 @@ "@t3-oss/env-nextjs": "^0.12.0", "@types/mdx": "^2.0.13", "@vercel/analytics": "^1.6.1", + "@vercel/speed-insights": "^2.0.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index 8b09dec7..910feda3 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -1,4 +1,5 @@ import { Analytics } from "@vercel/analytics/next"; +import { SpeedInsights } from "@vercel/speed-insights/next"; import { GeistPixelSquare } from "geist/font/pixel"; import "@/styles/globals.css"; @@ -71,6 +72,7 @@ export default function RootLayout({ children }: { children: ReactNode }) { {children} + ); diff --git a/bun.lock b/bun.lock index fb02160f..a5434a6c 100644 --- a/bun.lock +++ b/bun.lock @@ -86,6 +86,7 @@ "@t3-oss/env-nextjs": "^0.12.0", "@types/mdx": "^2.0.13", "@vercel/analytics": "^1.6.1", + "@vercel/speed-insights": "^2.0.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", @@ -1005,6 +1006,8 @@ "@vercel/analytics": ["@vercel/analytics@1.6.1", "https://registry.better-npm.dev/@vercel/analytics/-/analytics-1.6.1.tgz", { "peerDependencies": { "@remix-run/react": "^2", "@sveltejs/kit": "^1 || ^2", "next": ">= 13", "react": "^18 || ^19 || ^19.0.0-rc", "svelte": ">= 4", "vue": "^3", "vue-router": "^4" }, "optionalPeers": ["@remix-run/react", "@sveltejs/kit", "next", "react", "svelte", "vue", "vue-router"] }, "sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg=="], + "@vercel/speed-insights": ["@vercel/speed-insights@2.0.0", "", { "peerDependencies": { "@sveltejs/kit": "^1 || ^2", "next": ">= 13", "nuxt": ">= 3", "react": "^18 || ^19 || ^19.0.0-rc", "svelte": ">= 4", "vue": "^3", "vue-router": "^4" }, "optionalPeers": ["@sveltejs/kit", "next", "nuxt", "react", "svelte", "vue", "vue-router"] }, "sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w=="], + "@vitejs/plugin-react": ["@vitejs/plugin-react@6.0.1", "https://registry.better-npm.dev/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz", { "dependencies": { "@rolldown/pluginutils": "1.0.0-rc.7" }, "peerDependencies": { "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0", "babel-plugin-react-compiler": "^1.0.0", "vite": "^8.0.0" }, "optionalPeers": ["@rolldown/plugin-babel", "babel-plugin-react-compiler"] }, "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ=="], "@vitest/expect": ["@vitest/expect@4.1.5", "https://registry.better-npm.dev/@vitest/expect/-/expect-4.1.5.tgz", { "dependencies": { "@standard-schema/spec": "^1.1.0", "@types/chai": "^5.2.2", "@vitest/spy": "4.1.5", "@vitest/utils": "4.1.5", "chai": "^6.2.2", "tinyrainbow": "^3.1.0" } }, "sha512-PWBaRY5JoKuRnHlUHfpV/KohFylaDZTupcXN1H9vYryNLOnitSw60Mw9IAE2r67NbwwzBw/Cc/8q9BK3kIX8Kw=="],