Install Vercel Web Analytics integration

vercel[bot] · vercel[bot] · commit 6542ebd3f70c · 2026-06-05T09:05:28.000Z
# Vercel Web Analytics Installation Report ## Summary Successfully installed and configured Vercel Web Analytics for both Next.js applications in this monorepo following the official Vercel documentation. ## Changes Made ### 1. Package Installation - Installed `@vercel/analytics@^2.0.1` in both Next.js applications: - `extras/docs` - `extras/web` ### 2. Configuration Updates #### extras/docs/app/layout.tsx - Added import: `import { Analytics } from '@vercel/analytics/next'` - Added `<Analytics />` component inside the `<body>` tag (after children) - This enables automatic tracking of page views and user interactions #### extras/docs/package.json - Added `"@vercel/analytics": "^2.0.1"` to dependencies #### extras/web/package.json - Added `"@vercel/analytics": "^2.0.1"` to dependencies - Note: The layout.tsx file already had Analytics configured #### pnpm-lock.yaml - Updated lockfile with new dependency resolutions ## Implementation Details ### Framework Detection This is a pnpm monorepo with two Next.js 15 applications using the App Router architecture. ### Installation Approach Following the official Vercel documentation (https://vercel.com/docs/analytics/quickstart): 1. Fetched latest installation instructions from Vercel docs 2. Identified Next.js App Router as the framework 3. Installed package using pnpm (the project's package manager) 4. Added Analytics component to root layout files as per Next.js App Router best practices ### Configuration Pattern The Analytics component is placed at the end of the `<body>` tag (after `{children}`) as recommended by Vercel. This ensures: - Analytics loads after main content - Minimal impact on page load performance - Proper tracking of all page interactions ## Testing Notes The packages were successfully installed and configuration is correct. The project has pre-existing build errors in the `@repo/ui` package (unrelated to Analytics installation): - Missing react type declarations in the shared UI package - These errors existed before our changes The Analytics integration itself is correctly implemented and will work once the project's pre-existing issues are resolved or when deployed to Vercel (where Analytics routes are automatically enabled). ## Next Steps (for project owner) 1. Deploy the application to Vercel 2. Enable Web Analytics in the Vercel dashboard (Analytics section of your project) 3. After deployment, verify tracking by checking for requests to `/_vercel/insights/*` in browser DevTools 4. Analytics data will start appearing in the Vercel dashboard ## Files Modified - `extras/docs/app/layout.tsx` - Added Analytics component - `extras/docs/package.json` - Added dependency - `extras/web/package.json` - Added dependency - `pnpm-lock.yaml` - Updated lockfile Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
diff --git 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 (
     <html lang="en">
-      <body className={`${geistSans.variable} ${geistMono.variable}`}>{children}</body>
+      <body className={`${geistSans.variable} ${geistMono.variable}`}>
+        {children}
+        <Analytics />
+      </body>
     </html>
   )
 }
diff --git a/extras/docs/package.json b/extras/docs/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@repo/ui": "workspace:^",
+    "@vercel/analytics": "^2.0.1",
     "next": "^15.5.16",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
diff --git a/extras/web/package.json b/extras/web/package.json
@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@repo/ui": "workspace:^",
+    "@vercel/analytics": "^2.0.1",
     "next": "^15.5.16",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
