From c85ce6b4e41f99847a5121495d4516c9966cc5b6 Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 14 May 2026 07:25:28 +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 Integration ## Summary Successfully installed and configured Vercel Speed Insights for the project's Next.js landing page and React web app. ## Changes Made ### 1. Package Installation - Installed `@vercel/speed-insights@2.0.0` in both `landing/` and `web/` workspaces - Updated package.json files for both workspaces - Updated bun.lock file with new dependencies ### 2. Next.js Integration (landing/) **File: `landing/src/app/layout.tsx`** - Added import: `import { SpeedInsights } from '@vercel/speed-insights/next'` - Added `` component to the root layout's body section - Follows Next.js App Router pattern for v13.5+ as documented in Vercel's official guide ### 3. React Integration (web/) **File: `web/src/main.tsx`** - Added import: `import { SpeedInsights } from '@vercel/speed-insights/react'` - Added `` component to the React app root, inside the provider hierarchy - Placed after main App component to track all user interactions ## Implementation Details ### Framework-Specific Approach - Used the latest official Vercel Speed Insights documentation (fetched from https://vercel.com/docs/speed-insights/quickstart) - Applied framework-specific imports as recommended: - Next.js: `@vercel/speed-insights/next` - React: `@vercel/speed-insights/react` ### Code Quality - All builds pass successfully (Next.js and React/Vite) - No linting errors introduced in modified files - Preserved existing code structure and patterns - Used appropriate component placement within existing layouts ## Verification Steps Completed 1. ✅ Package installation successful in both workspaces 2. ✅ Next.js landing page builds without errors 3. ✅ React web app builds without errors 4. ✅ No linting errors in modified files 5. ✅ Lock file updated correctly ## Next Steps Once deployed to Vercel: 1. Enable Speed Insights in the Vercel dashboard for the project 2. Deploy the changes to production 3. Monitor Speed Insights dashboard after users visit the site to view performance metrics ## Files Modified - `bun.lock` - Updated with new dependency - `landing/package.json` - Added @vercel/speed-insights dependency - `landing/src/app/layout.tsx` - Added SpeedInsights component - `web/package.json` - Added @vercel/speed-insights dependency - `web/src/main.tsx` - Added SpeedInsights component Co-authored-by: Vercel --- bun.lock | 14 ++++++++------ landing/package.json | 1 + landing/src/app/layout.tsx | 2 ++ web/package.json | 7 ++++--- web/src/main.tsx | 2 ++ 5 files changed, 17 insertions(+), 9 deletions(-) diff --git a/bun.lock b/bun.lock index 157138af..99493baa 100644 --- a/bun.lock +++ b/bun.lock @@ -17,7 +17,7 @@ }, "app": { "name": "@voicebox/app", - "version": "0.4.2", + "version": "0.5.0", "dependencies": { "@dnd-kit/core": "^6.3.1", "@dnd-kit/sortable": "^10.0.0", @@ -75,12 +75,13 @@ }, "landing": { "name": "@voicebox/landing", - "version": "0.4.2", + "version": "0.5.0", "dependencies": { "@fontsource/space-grotesk": "^5.2.10", "@icons-pack/react-simple-icons": "^13.13.0", "@radix-ui/react-separator": "^1.1.8", "@radix-ui/react-slot": "^1.2.4", + "@vercel/speed-insights": "^2.0.0", "autoprefixer": "^10.4.17", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", @@ -104,7 +105,7 @@ }, "tauri": { "name": "@voicebox/tauri", - "version": "0.4.2", + "version": "0.5.0", "dependencies": { "@tauri-apps/api": "^2.0.0", "@tauri-apps/plugin-dialog": "^2.0.0", @@ -127,9 +128,10 @@ }, "web": { "name": "@voicebox/web", - "version": "0.4.2", + "version": "0.5.0", "dependencies": { "@tanstack/react-query": "^5.0.0", + "@vercel/speed-insights": "^2.0.0", "react": "^18.3.0", "react-dom": "^18.3.0", "wavesurfer.js": "^7.0.0", @@ -637,6 +639,8 @@ "@ungap/structured-clone": ["@ungap/structured-clone@1.3.0", "", {}, "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g=="], + "@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@4.7.0", "", { "dependencies": { "@babel/core": "^7.28.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-beta.27", "@types/babel__core": "^7.20.5", "react-refresh": "^0.17.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0" } }, "sha512-gUu9hwfWvvEDBBmgtAowQCojwZmJ5mcLn3aufeCsitijs3+f2NsrPtlAWIR6OPiqljl96GVCUbLe0HyqIpVaoA=="], "@voicebox/app": ["@voicebox/app@workspace:app"], @@ -1181,8 +1185,6 @@ "@voicebox/landing/tailwindcss": ["tailwindcss@3.4.19", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.7", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ=="], - "@voicebox/web/wavesurfer.js": ["wavesurfer.js@7.12.1", "", {}, "sha512-NswPjVHxk0Q1F/VMRemCPUzSojjuHHisQrBqQiRXg7MVbe3f5vQ6r0rTTXA/a/neC/4hnOEC4YpXca4LpH0SUg=="], - "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="], "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="], diff --git a/landing/package.json b/landing/package.json index 62c7a940..2377787d 100644 --- a/landing/package.json +++ b/landing/package.json @@ -13,6 +13,7 @@ "@icons-pack/react-simple-icons": "^13.13.0", "@radix-ui/react-separator": "^1.1.8", "@radix-ui/react-slot": "^1.2.4", + "@vercel/speed-insights": "^2.0.0", "autoprefixer": "^10.4.17", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/landing/src/app/layout.tsx b/landing/src/app/layout.tsx index 689d4f69..47fe89bd 100644 --- a/landing/src/app/layout.tsx +++ b/landing/src/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from 'next'; +import { SpeedInsights } from '@vercel/speed-insights/next'; import './globals.css'; export const metadata: Metadata = { @@ -50,6 +51,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
{children}
+ ); diff --git a/web/package.json b/web/package.json index 3ff978c6..f7f6ebd0 100644 --- a/web/package.json +++ b/web/package.json @@ -10,11 +10,12 @@ "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0" }, "dependencies": { + "@tanstack/react-query": "^5.0.0", + "@vercel/speed-insights": "^2.0.0", "react": "^18.3.0", "react-dom": "^18.3.0", - "@tanstack/react-query": "^5.0.0", - "zustand": "^4.5.0", - "wavesurfer.js": "^7.0.0" + "wavesurfer.js": "^7.0.0", + "zustand": "^4.5.0" }, "devDependencies": { "@types/react": "^18.3.0", diff --git a/web/src/main.tsx b/web/src/main.tsx index 771f07e8..579a0aca 100644 --- a/web/src/main.tsx +++ b/web/src/main.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { SpeedInsights } from '@vercel/speed-insights/react'; import App from '../../app/src/App'; import '../../app/src/index.css'; import { PlatformProvider } from '../../app/src/platform/PlatformContext'; @@ -22,6 +23,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render( + ,