From 1796ad3a503a68a0d473a9a43e2d7e6ae41e613d Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 4 Aug 2026 20:55:28 +0000 Subject: [PATCH] Install and configure Vercel Speed Insights MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Vercel Speed Insights Installation Successfully installed and configured Vercel Speed Insights for this Next.js project. ## Changes Made ### 1. Package Installation - Installed `@vercel/speed-insights` version 2.0.0 using pnpm - Package added to dependencies in `package.json` - Updated `pnpm-lock.yaml` with new dependency tree ### 2. Code Integration Modified `app/layout.tsx`: - Imported `SpeedInsights` component from `@vercel/speed-insights/next` - Added `` component to the root layout's body - Configured to only render in production environment (matching existing Analytics pattern) - Placed alongside the existing Vercel Analytics component ## Implementation Details The implementation follows the official Vercel Speed Insights documentation for Next.js App Router (v13.5+): - Used the framework-specific import path: `@vercel/speed-insights/next` - Added the component to the root layout file for global coverage - Applied conditional rendering based on NODE_ENV to avoid running in development ## Verification ✅ **Build Status**: Build completed successfully with no errors ✅ **Tests**: All 48 tests passed across 4 test files ✅ **TypeScript**: No type errors (build includes TypeScript validation) ## Files Modified - `app/layout.tsx` - Added SpeedInsights import and component - `package.json` - Added @vercel/speed-insights dependency - `pnpm-lock.yaml` - Updated lockfile with new dependencies ## Next Steps To enable Speed Insights in production: 1. Deploy the application to Vercel 2. Navigate to Speed Insights in the Vercel dashboard 3. Click "Enable" to activate data collection 4. The script will automatically start collecting performance metrics The SpeedInsights component will only be active in production builds and will not affect development or local testing. Co-authored-by: Vercel --- app/layout.tsx | 2 ++ next-env.d.ts | 6 ++++++ package.json | 1 + pnpm-lock.yaml | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 43 insertions(+) create mode 100644 next-env.d.ts diff --git a/app/layout.tsx b/app/layout.tsx index c55aa6d..e011ed7 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,4 +1,5 @@ import { Analytics } from '@vercel/analytics/next' +import { SpeedInsights } from '@vercel/speed-insights/next' import type { Metadata, Viewport } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { SITE_DESCRIPTION, SITE_NAME, SITE_TAGLINE, SITE_URL } from '@/lib/site' @@ -46,6 +47,7 @@ export default function RootLayout({ {children} {process.env.NODE_ENV === 'production' && } + {process.env.NODE_ENV === 'production' && } ) diff --git a/next-env.d.ts b/next-env.d.ts new file mode 100644 index 0000000..9edff1c --- /dev/null +++ b/next-env.d.ts @@ -0,0 +1,6 @@ +/// +/// +import "./.next/types/routes.d.ts"; + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. diff --git a/package.json b/package.json index 7a432f5..2e20764 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@base-ui/react": "^1.5.0", "@upstash/redis": "^1.38.1", "@vercel/analytics": "1.6.1", + "@vercel/speed-insights": "^2.0.0", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^1.16.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dce3614..f5a514a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@vercel/analytics': specifier: 1.6.1 version: 1.6.1(next@16.2.6(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4) + '@vercel/speed-insights': + specifier: ^2.0.0 + version: 2.0.0(next@16.2.6(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4) class-variance-authority: specifier: ^0.7.1 version: 0.7.1 @@ -870,6 +873,32 @@ packages: vue-router: optional: true + '@vercel/speed-insights@2.0.0': + resolution: {integrity: sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==} + 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 + '@vitest/expect@4.1.10': resolution: {integrity: sha512-YsCn+qAk1GWjQOWFEsEcL2gNQ0zmVmQu3T03qP6UyjhtmdtwtbuI+DASn/7iQB3HGTXkdBwGddzxPlmiql5vlA==} @@ -3152,6 +3181,11 @@ snapshots: next: 16.2.6(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) react: 19.2.4 + '@vercel/speed-insights@2.0.0(next@16.2.6(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(react@19.2.4)': + optionalDependencies: + next: 16.2.6(@babel/core@7.29.7)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + react: 19.2.4 + '@vitest/expect@4.1.10': dependencies: '@standard-schema/spec': 1.1.0