From 1ba27c278fecfbfd875e7f5faa17da7ee6bfb5e5 Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 12 Feb 2026 21:20:23 +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 Implemented Vercel Speed Insights for Next.js ================================================ Successfully installed and configured Vercel Speed Insights for the Next.js App Router application. CHANGES MADE: ------------- 1. **Package Installation:** - Added `@vercel/speed-insights` version 1.3.1 to dependencies in `apps/next/package.json` - Updated `yarn.lock` to reflect the new dependency 2. **Root Layout Integration:** - Modified `apps/next/app/layout.tsx` to import and use the SpeedInsights component - Added import: `import { SpeedInsights } from '@vercel/speed-insights/next'` - Placed `` component inside the `` tag, after the `{children}` content - This follows the recommended pattern for Next.js 13.5+ with App Router IMPLEMENTATION DETAILS: ----------------------- The implementation uses the App Router approach since this project is using: - Next.js 16.1.1 (which is >= 13.5) - App Router architecture (confirmed by presence of `app/layout.tsx`) The SpeedInsights component was added to the root layout to ensure it's present on all pages of the application, which will enable Vercel to collect real user metrics (RUM) data including: - Core Web Vitals (LCP, FID, CLS) - Time to First Byte (TTFB) - First Contentful Paint (FCP) VERIFICATION: ------------- ✓ Linter check passed (biome check) ✓ Build completed successfully with no errors ✓ Component properly integrated into the React component tree ✓ Lock files updated (yarn.lock) The implementation preserves all existing code structure and only adds the necessary Speed Insights integration as requested. Co-authored-by: Vercel --- apps/next/app/layout.tsx | 2 ++ apps/next/package.json | 1 + yarn.lock | 28 ++++++++++++++++++++++++++++ 3 files changed, 31 insertions(+) diff --git a/apps/next/app/layout.tsx b/apps/next/app/layout.tsx index 39b4f2c..02c2ec8 100644 --- a/apps/next/app/layout.tsx +++ b/apps/next/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from 'next' import { NextTamaguiProvider } from 'app/provider/NextTamaguiProvider' +import { SpeedInsights } from '@vercel/speed-insights/next' export const metadata: Metadata = { title: 'Tamagui • App Router', @@ -16,6 +17,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) > {children} + ) diff --git a/apps/next/package.json b/apps/next/package.json index dd8f753..9042039 100644 --- a/apps/next/package.json +++ b/apps/next/package.json @@ -19,6 +19,7 @@ "@trpc/client": "^11.0.0", "@trpc/react-query": "^11.0.0", "@trpc/server": "^11.0.0", + "@vercel/speed-insights": "^1.3.1", "api": "0.0.0", "app": "0.0.0", "axios": "^1.13.2", diff --git a/yarn.lock b/yarn.lock index 00c4d39..8700c47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7361,6 +7361,33 @@ __metadata: languageName: node linkType: hard +"@vercel/speed-insights@npm:^1.3.1": + version: 1.3.1 + resolution: "@vercel/speed-insights@npm:1.3.1" + 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 + checksum: 10/64d82e980900961c144bdf0054a4a261c99bcb1150f2cc37614b0cf879143885f56077360325c4805c4491eba027bca908ebd8c7c200eb068b581b13533b2de1 + languageName: node + linkType: hard + "@vercel/static-build@npm:2.8.36": version: 2.8.36 resolution: "@vercel/static-build@npm:2.8.36" @@ -14066,6 +14093,7 @@ __metadata: "@trpc/react-query": "npm:^11.0.0" "@trpc/server": "npm:^11.0.0" "@types/node": "npm:^20.14.1" + "@vercel/speed-insights": "npm:^1.3.1" api: "npm:0.0.0" app: "npm:0.0.0" axios: "npm:^1.13.2"