Add Vercel Web Analytics to Next.js (#428)

Implemented Vercel Web Analytics for Next.js (App Router)

## Summary
Successfully installed and configured @vercel/analytics package for the Next.js documentation site.

## Changes Made

### 1. Installed Dependencies
- Installed `@vercel/analytics` package using pnpm
- Command executed: `pnpm install @vercel/analytics`

### 2. Modified Files
- **docs/src/app/layout.tsx**
  - Added import: `import { Analytics } from "@vercel/analytics/next";`
  - Added `<Analytics />` component inside the `<body>` tag, right after `<SpeedInsights />`
  - Placement follows best practices for App Router projects

### 3. Updated Lock Files
- **docs/package.json** - Added @vercel/analytics to dependencies
- **docs/pnpm-lock.yaml** - Updated with new dependency tree

## Implementation Details
- This is an App Router project (uses `app/` directory structure)
- The Analytics component was added to the root layout file at `docs/src/app/layout.tsx`
- Followed the same pattern as the existing SpeedInsights component
- Preserved all existing code structure and formatting

## Verification
✅ Build completed successfully with no errors
✅ TypeScript compilation passed
✅ Modified file passes ESLint checks
✅ All 15 static pages generated correctly

## Notes
- The project already had @vercel/speed-insights installed, so the pattern for adding Analytics was consistent
- Pre-existing lint errors in mobile-nav-context.tsx and theme-toggle.tsx are unrelated to this change
- Lock files are properly updated and staged as per dependency changes

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>

This commit is contained in:

vercel[bot]

2026-02-12 17:41:49 -06:00

committed by

GitHub

co-authored by

Vercel <vercel[bot]@users.noreply.github.com>

parent d03e238516

commit 14029d2450

3 changed files with 37 additions and 0 deletions

									
										docs/src/app/layout.tsx
									
		+2
		
												View File
												
				@@ -8,6 +8,7 @@ import { Sidebar } from "@/components/sidebar";

				import { DocsChat } from "@/components/docs-chat";

				import { cookies } from "next/headers";

				import { SpeedInsights } from "@vercel/speed-insights/next";

				import { Analytics } from "@vercel/analytics/next";

				const geist = Geist({

				  variable: "--font-geist",

				@@ -64,6 +65,7 @@ export default async function RootLayout({

				          </MobileNavProvider>

				        </ThemeProvider>

				        <SpeedInsights />

				        <Analytics />

				      </body>

				    </html>

				  );