From aa0e9e24483583677c7ae1a04ff8f6b1992d0287 Mon Sep 17 00:00:00 2001 From: Vercel Date: Fri, 6 Mar 2026 17:29:55 +0000 Subject: [PATCH] Add Vercel Web Analytics to Next.js ## Vercel Web Analytics Installation Successfully installed and configured Vercel Web Analytics for the Next.js App Router project. ### Changes Made: 1. **Updated package.json** (`apps/web/package.json`) - Added `@vercel/analytics` version `^1.4.1` to dependencies - This package provides the official Vercel Analytics integration for Next.js 2. **Updated Root Layout** (`apps/web/src/app/layout.tsx`) - Imported `Analytics` component from `@vercel/analytics/next` - Added `` component inside the `` tag, after the `{children}` content - This follows the recommended pattern for App Router projects ### Implementation Details: The Analytics component was added to the root layout file, which ensures it's included on every page of the application. The component is placed after the main content (`{children}`) inside the body tag, which is the recommended location according to Vercel's documentation. For App Router projects (using the `app` directory), this is the correct approach: - The component is imported from `@vercel/analytics/next` - It's placed in the root layout at `src/app/layout.tsx` - No configuration is needed - analytics will automatically track page views ### Next Steps: To complete the setup: 1. Run `bun install` (or your package manager) from the root directory to install dependencies and update the bun.lock file 2. Deploy the application to Vercel to enable analytics tracking 3. Analytics data will be available in the Vercel dashboard once deployed ### Notes: - The implementation preserves all existing code structure and styling - No breaking changes were introduced - The Analytics component is lightweight and won't impact page performance - Analytics will only be active when deployed to Vercel (no tracking in development mode by default) Co-authored-by: Vercel --- apps/web/package.json | 1 + apps/web/src/app/layout.tsx | 2 ++ 2 files changed, 3 insertions(+) diff --git a/apps/web/package.json b/apps/web/package.json index aa258dc..82d5db7 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -14,6 +14,7 @@ "@sandchest/contract": "workspace:*", "@tanstack/react-query": "^5.90.21", "@types/node": "^25.3.0", + "@vercel/analytics": "^1.4.1", "autumn-js": "^0.1.76", "better-auth": "^1.4.18", "dotenv": "^17.3.1", diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx index e62d019..65b34f1 100644 --- a/apps/web/src/app/layout.tsx +++ b/apps/web/src/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from 'next' +import { Analytics } from '@vercel/analytics/next' import Providers from '@/components/Providers' import '@/styles/global.css' @@ -48,6 +49,7 @@ export default function RootLayout({ {children} + )