From 6a02b6f0173e73a27d153bca1d531c7ca8f8edcf Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 10 Mar 2026 07:02:51 +0000 Subject: [PATCH] Install Vercel Web Analytics in Next.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Vercel Web Analytics Installation Report ## Summary Successfully installed and configured Vercel Web Analytics for the Next.js project in `extras/web/`. ## Changes Made ### 1. Package Installation - **File**: `extras/web/package.json` - **Action**: Added `@vercel/analytics` version `^1.6.1` as a dependency - **Method**: Used `pnpm add @vercel/analytics` as specified by the project's packageManager ### 2. Analytics Component Integration - **File**: `extras/web/app/layout.tsx` - **Actions**: - Added import statement: `import { Analytics } from '@vercel/analytics/next'` - Added `` component inside the `` tag, after `{children}` - **Reasoning**: This is an App Router project (uses `app/` directory), so the Analytics component was added to the root layout file following Next.js App Router best practices ### 3. Lock File Updates - **File**: `pnpm-lock.yaml` - **Action**: Updated with the new dependency and its transitive dependencies - **Note**: The lock file was automatically updated by pnpm during installation ## Verification Steps Completed 1. ✅ **Dependencies Installed**: Successfully ran `pnpm add @vercel/analytics` 2. ✅ **Build Verification**: Ran `pnpm run build` - build completed successfully 3. ✅ **Type Checking**: TypeScript compilation passed without errors 4. ✅ **Linting**: Source files pass linting (warnings in generated `.next/` folder are expected and unrelated to changes) 5. ✅ **Code Structure**: Preserved existing code patterns and formatting ## Implementation Details The project uses: - **Router Type**: App Router (app directory) - **Package Manager**: pnpm v10.24.0 - **Next.js Version**: 15.5.10 - **TypeScript**: Yes The Analytics component was placed according to Vercel's official documentation for App Router projects, ensuring it tracks page views across the entire application while maintaining the existing layout structure and styling. ## Files Modified - `extras/web/app/layout.tsx` - Added Analytics import and component - `extras/web/package.json` - Added @vercel/analytics dependency - `pnpm-lock.yaml` - Updated with new dependency information Co-authored-by: Vercel --- extras/web/app/layout.tsx | 6 +++++- extras/web/package.json | 1 + pnpm-lock.yaml | 36 ++++++++++++++++++++++++++++++++++++ 3 files changed, 42 insertions(+), 1 deletion(-) diff --git a/extras/web/app/layout.tsx b/extras/web/app/layout.tsx index 2e5719345e..a28c1043ea 100644 --- a/extras/web/app/layout.tsx +++ b/extras/web/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from 'next' import localFont from 'next/font/local' +import { Analytics } from '@vercel/analytics/next' import './globals.css' const geistSans = localFont({ @@ -23,7 +24,10 @@ export default function RootLayout({ }>) { return ( - {children} + + {children} + + ) } diff --git a/extras/web/package.json b/extras/web/package.json index 65bb5be430..f413f8d4db 100644 --- a/extras/web/package.json +++ b/extras/web/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@repo/ui": "workspace:^", + "@vercel/analytics": "^1.6.1", "next": "^15.5.10", "react": "^19.2.3", "react-dom": "^19.2.3" diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f3a0e98430..f371e15feb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -75,6 +75,9 @@ importers: '@repo/ui': specifier: workspace:^ version: link:../../repo/ui + '@vercel/analytics': + specifier: ^1.6.1 + version: 1.6.1(next@15.5.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3) next: specifier: ^15.5.10 version: 15.5.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3) @@ -1447,6 +1450,32 @@ packages: resolution: {integrity: sha512-Xzmnb58+Db78gT/CCj/PVCvK+zxbnsw6F+O1oheYszJbBSdEjVhQi3C/Xttzxgi/GLmpvOggRs1RFpiJ8+c34Q==} engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0} + '@vercel/analytics@1.6.1': + resolution: {integrity: sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==} + peerDependencies: + '@remix-run/react': ^2 + '@sveltejs/kit': ^1 || ^2 + next: '>= 13' + react: ^18 || ^19 || ^19.0.0-rc + svelte: '>= 4' + vue: ^3 + vue-router: ^4 + peerDependenciesMeta: + '@remix-run/react': + optional: true + '@sveltejs/kit': + optional: true + next: + optional: true + react: + optional: true + svelte: + optional: true + vue: + optional: true + vue-router: + optional: true + '@vitest/coverage-v8@4.0.18': resolution: {integrity: sha512-7i+N2i0+ME+2JFZhfuz7Tg/FqKtilHjGyGvoHYQ6iLV0zahbsJ9sljC9OcFcPDbhYKCet+sG8SsVqlyGvPflZg==} peerDependencies: @@ -1645,6 +1674,7 @@ packages: basic-ftp@5.0.5: resolution: {integrity: sha512-4Bcg1P8xhUuqcii/S0Z9wiHIrQVPMermM1any+MX5GeGD7faD3/msQUDGLol9wOcz4/jbg/WJnGqoJF6LiBdtg==} engines: {node: '>=10.0.0'} + deprecated: Security vulnerability fixed in 5.2.0, please upgrade better-path-resolve@1.0.0: resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==} @@ -3444,6 +3474,7 @@ packages: syncpack@14.0.0: resolution: {integrity: sha512-OfAa3Oip5YC9Ad1jEs92Hw08Wy4JfdpdeequIwaJGsQG0tJtb8gpQfCdLuBefsk6n8WiUdt/5qmzcW+BDXtzbQ==} engines: {node: '>=14.17.0'} + deprecated: 'pnpm users: upgrade to 14.0.2 or newer' hasBin: true term-size@2.2.1: @@ -4714,6 +4745,11 @@ snapshots: '@typescript-eslint/types': 8.50.0 eslint-visitor-keys: 4.2.1 + '@vercel/analytics@1.6.1(next@15.5.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)': + optionalDependencies: + next: 15.5.10(react-dom@19.2.3(react@19.2.3))(react@19.2.3) + react: 19.2.3 + '@vitest/coverage-v8@4.0.18(vitest@4.0.18(@types/node@25.3.0)(happy-dom@20.7.0))': dependencies: '@bcoe/v8-coverage': 1.0.2