From ab528376cb809e0698433588f44c0d8d37983a75 Mon Sep 17 00:00:00 2001 From: Vercel Date: Sun, 19 Apr 2026 08:33:44 +0000 Subject: [PATCH] Install and Configure Vercel Speed Insights 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 - Updated `package.json` to include the new dependency - Updated `pnpm-lock.yaml` with the new package and its dependencies ### 2. Configuration - Modified `app/layout.tsx` (root layout file) - Added import: `import { SpeedInsights } from "@vercel/speed-insights/next";` - Added `` component at the end of the `` tag, after the main content ### 3. Implementation Details - Followed the official Vercel Speed Insights documentation from https://vercel.com/docs/speed-insights/quickstart - Used the Next.js-specific integration pattern with the `/next` import path - Placed the component in the root layout to ensure it's available across all pages - Positioned it at the end of the body tag as recommended by the documentation ### 4. Verification - Build completed successfully with no errors - The linter was run; existing lint errors in other files are unrelated to these changes - No new errors or warnings were introduced by the Speed Insights integration ### 5. Generated Files - `next-env.d.ts` was automatically updated by Next.js (changed from dev types to production types reference) ## Next Steps: To see Speed Insights data: 1. Ensure the project is deployed to Vercel 2. Enable Speed Insights in the Vercel dashboard (Project Settings > Speed Insights) 3. After deployment and user visits, performance metrics will appear in the dashboard The implementation follows Next.js App Router best practices and maintains the existing code structure and styling. Co-authored-by: Vercel --- app/layout.tsx | 2 ++ next-env.d.ts | 2 +- package.json | 1 + pnpm-lock.yaml | 34 ++++++++++++++++++++++++++++++++++ 4 files changed, 38 insertions(+), 1 deletion(-) diff --git a/app/layout.tsx b/app/layout.tsx index 66db5da..f0bc0cc 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import { Toaster } from "sonner"; import { ThemeProvider } from "@/components/theme-provider"; +import { SpeedInsights } from "@vercel/speed-insights/next"; import "./globals.css"; import { SessionProvider } from "next-auth/react"; @@ -81,6 +82,7 @@ export default function RootLayout({ {children} + ); diff --git a/next-env.d.ts b/next-env.d.ts index c4b7818..9edff1c 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,6 +1,6 @@ /// /// -import "./.next/dev/types/routes.d.ts"; +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 ce77859..7abcbff 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "@vercel/blob": "^0.24.1", "@vercel/functions": "^2.0.0", "@vercel/otel": "^1.12.0", + "@vercel/speed-insights": "^2.0.0", "@xyflow/react": "^12.10.0", "ai": "6.0.37", "bcrypt-ts": "^5.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cede9a0..fe40d53 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,6 +92,9 @@ importers: '@vercel/otel': specifier: ^1.12.0 version: 1.14.0(@opentelemetry/api-logs@0.200.0)(@opentelemetry/api@1.9.0)(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/resources@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-logs@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-metrics@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0)) + '@vercel/speed-insights': + specifier: ^2.0.0 + version: 2.0.0(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.51.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1))(react@19.0.1) '@xyflow/react': specifier: ^12.10.0 version: 12.10.0(@types/react@18.3.18)(react-dom@19.0.1(react@19.0.1))(react@19.0.1) @@ -2469,6 +2472,32 @@ packages: engines: {node: '>=18.14'} deprecated: '@vercel/postgres is deprecated. If you are setting up a new database, you can choose an alternate storage solution from the Vercel Marketplace. If you had an existing Vercel Postgres database, it should have been migrated to Neon as a native Vercel integration. You can find more details and the guide to migrate to Neon''s SDKs here: https://neon.com/docs/guides/vercel-postgres-transition-guide' + '@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 + '@xyflow/react@12.10.0': resolution: {integrity: sha512-eOtz3whDMWrB4KWVatIBrKuxECHqip6PfA8fTpaS2RUGVpiEAe+nqDKsLqkViVWxDGreq0lWX71Xth/SPAzXiw==} peerDependencies: @@ -5954,6 +5983,11 @@ snapshots: - utf-8-validate optional: true + '@vercel/speed-insights@2.0.0(next@16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.51.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1))(react@19.0.1)': + optionalDependencies: + next: 16.0.10(@opentelemetry/api@1.9.0)(@playwright/test@1.51.0)(react-dom@19.0.1(react@19.0.1))(react@19.0.1) + react: 19.0.1 + '@xyflow/react@12.10.0(@types/react@18.3.18)(react-dom@19.0.1(react@19.0.1))(react@19.0.1)': dependencies: '@xyflow/system': 0.0.74