From 0a5945bda7f9eac4e5b9ae2de543e0237f4d05e0 Mon Sep 17 00:00:00 2001 From: Vercel Date: Fri, 23 Jan 2026 14:08:39 +0000 Subject: [PATCH] Add Vercel Speed Insights to Next.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Vercel Speed Insights Implementation Successfully installed and configured Vercel Speed Insights for this Next.js 16.0.10 App Router project. ### Changes Made #### 1. Package Installation - Added `@vercel/speed-insights` version ^1.3.1 to project dependencies - Used pnpm as the package manager (matching the existing pnpm-lock.yaml) #### 2. Code Implementation **Modified: app/layout.tsx** - Imported `SpeedInsights` component from `@vercel/speed-insights/next` - Added `` component to the root layout inside the `` tag - Placed after `{children}` and alongside the existing `` component ### Implementation Details Since this project uses: - **Next.js 16.0.10** (newer than 13.5+) - **App Router** architecture (app/layout.tsx) The implementation follows the recommended approach for Next.js 13.5+ with App Router: - Used the `/next` import path for automatic route detection - No need for manual route prop or usePathname hook - The component automatically tracks page views and performance metrics ### Files Modified - `app/layout.tsx` - Added SpeedInsights import and component - `package.json` - Added @vercel/speed-insights dependency - `pnpm-lock.yaml` - Updated with new dependency tree - `tsconfig.json` - Auto-updated by Next.js build (jsx: "react-jsx" and .next/dev/types) ### Verification - ✅ Build completed successfully (pnpm build) - ✅ No TypeScript errors - ✅ All dependencies installed correctly - ✅ Lock file updated properly ### Notes The SpeedInsights component will automatically: - Track Core Web Vitals (LCP, FID, CLS, TTFB, FCP) - Send performance data to Vercel when deployed - Work alongside the existing @vercel/analytics setup - Have zero impact in development mode No additional configuration is required. The component will start collecting performance metrics once deployed to Vercel. Co-authored-by: Vercel --- app/layout.tsx | 2 ++ package.json | 1 + pnpm-lock.yaml | 31 +++++++++++++++++++++++++++++++ tsconfig.json | 24 +++++++++++++++++++----- 4 files changed, 53 insertions(+), 5 deletions(-) diff --git a/app/layout.tsx b/app/layout.tsx index c1b9bef..de75e5c 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import type React from "react" import type { Metadata, Viewport } from "next" import { Inter, Geist_Mono } from "next/font/google" import { Analytics } from "@vercel/analytics/next" +import { SpeedInsights } from "@vercel/speed-insights/next" import "./globals.css" const _inter = Inter({ subsets: ["latin"] }) @@ -44,6 +45,7 @@ export default function RootLayout({ {children} + ) diff --git a/package.json b/package.json index e878edf..a719d4d 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "@supabase/ssr": "0.8.0", "@supabase/supabase-js": "latest", "@vercel/analytics": "1.3.1", + "@vercel/speed-insights": "^1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index df3dc69..e69f426 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,6 +101,9 @@ importers: '@vercel/analytics': specifier: 1.3.1 version: 1.3.1(next@16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0) + '@vercel/speed-insights': + specifier: ^1.3.1 + version: 1.3.1(next@16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0) autoprefixer: specifier: ^10.4.20 version: 10.4.20(postcss@8.5.0) @@ -1264,6 +1267,29 @@ packages: react: optional: true + '@vercel/speed-insights@1.3.1': + resolution: {integrity: sha512-PbEr7FrMkUrGYvlcLHGkXdCkxnylCWePx7lPxxq36DNdfo9mcUjLOmqOyPDHAOgnfqgGGdmE3XI9L/4+5fr+vQ==} + peerDependencies: + '@sveltejs/kit': ^1 || ^2 + next: '>= 13' + react: ^18 || ^19 || ^19.0.0-rc + svelte: '>= 4' + vue: ^3 + vue-router: ^4 + peerDependenciesMeta: + '@sveltejs/kit': + optional: true + next: + optional: true + react: + optional: true + svelte: + optional: true + vue: + optional: true + vue-router: + optional: true + aria-hidden@1.2.6: resolution: {integrity: sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==} engines: {node: '>=10'} @@ -2844,6 +2870,11 @@ snapshots: next: 16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0) react: 19.2.0 + '@vercel/speed-insights@1.3.1(next@16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0))(react@19.2.0)': + optionalDependencies: + next: 16.0.10(react-dom@19.2.0(react@19.2.0))(react@19.2.0) + react: 19.2.0 + aria-hidden@1.2.6: dependencies: tslib: 2.8.1 diff --git a/tsconfig.json b/tsconfig.json index 4b2dc7b..48d6d82 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "target": "ES6", "skipLibCheck": true, @@ -11,7 +15,7 @@ "moduleResolution": "bundler", "resolveJsonModule": true, "isolatedModules": true, - "jsx": "preserve", + "jsx": "react-jsx", "incremental": true, "plugins": [ { @@ -19,9 +23,19 @@ } ], "paths": { - "@/*": ["./*"] + "@/*": [ + "./*" + ] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], - "exclude": ["node_modules"] + "include": [ + "next-env.d.ts", + "**/*.ts", + "**/*.tsx", + ".next/types/**/*.ts", + ".next/dev/types/**/*.ts" + ], + "exclude": [ + "node_modules" + ] }