From a12197c5eafd84bf4cfb266f70775c2415a05f80 Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 29 Jan 2026 10:24:22 +0000 Subject: [PATCH] Install Vercel Web Analytics in Next.js Implemented Vercel Web Analytics for Next.js Applications ## Summary Successfully configured Vercel Web Analytics for two Next.js App Router projects in the repository. ## Changes Made ### 1. Added @vercel/analytics Dependency Modified package.json files to include the @vercel/analytics package: - `extras/docs/package.json` - Added "@vercel/analytics": "^1.5.0" - `extras/web/package.json` - Added "@vercel/analytics": "^1.5.0" ### 2. Updated Root Layout Files Modified both App Router layout.tsx files to integrate the Analytics component: **Files Modified:** - `extras/docs/app/layout.tsx` - `extras/web/app/layout.tsx` **Changes Applied:** - Added import statement: `import { Analytics } from '@vercel/analytics/next'` - Added `` component inside the `` tag, placed after `{children}` - Preserved all existing code structure, styling, and functionality ## Implementation Details Both Next.js applications use the App Router pattern with TypeScript. The Analytics component was added following the official Vercel Analytics documentation: 1. Imported the Analytics component from '@vercel/analytics/next' 2. Placed the component at the end of the body element in the root layout 3. Maintained proper formatting and code style consistency ## Notes - The root package.json already had @vercel/analytics installed at version ^1.5.0 - Both applications are configured identically for consistent analytics tracking - The workspace has pre-existing dependency issues unrelated to these changes (missing @0xsequence/identity-instrument package), which prevents running `pnpm install` successfully - Once the workspace dependency issues are resolved, running `pnpm install` will pull in the analytics package for both apps - The changes are syntactically correct and follow Next.js best practices for App Router projects ## Testing Recommendations Once dependencies are installed: 1. Run `pnpm build` in both extras/docs and extras/web directories 2. Start the development server with `pnpm dev` 3. Verify analytics are being tracked in your Vercel dashboard 4. Check browser console for any errors related to analytics Co-authored-by: Vercel --- extras/docs/app/layout.tsx | 6 +++++- extras/docs/package.json | 1 + extras/web/app/layout.tsx | 6 +++++- extras/web/package.json | 1 + 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/extras/docs/app/layout.tsx b/extras/docs/app/layout.tsx index 2e5719345..a28c1043e 100644 --- a/extras/docs/app/layout.tsx +++ b/extras/docs/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/docs/package.json b/extras/docs/package.json index 1bc08bf02..f99a930c0 100644 --- a/extras/docs/package.json +++ b/extras/docs/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@repo/ui": "workspace:*", + "@vercel/analytics": "^1.5.0", "next": "15.4.10", "react": "^19.1.0", "react-dom": "^19.1.0" diff --git a/extras/web/app/layout.tsx b/extras/web/app/layout.tsx index 2e5719345..a28c1043e 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 1a6af3416..473d468cd 100644 --- a/extras/web/package.json +++ b/extras/web/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@repo/ui": "workspace:*", + "@vercel/analytics": "^1.5.0", "next": "15.4.10", "react": "^19.1.0", "react-dom": "^19.1.0"