From 4a7feda478e058c539a92a926cf2ebc1706c0962 Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Tue, 28 Apr 2026 14:05:35 +0000
Subject: [PATCH] Install Vercel Web Analytics
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Vercel Web Analytics Installation Report

Successfully installed and configured Vercel Web Analytics for the Next.js project following the official Vercel documentation.

## Changes Made

### 1. Package Installation
- **File**: `apps/web/package.json`
- **Action**: Installed `@vercel/analytics@^2.0.1` package
- **Command**: `npm install @vercel/analytics`

### 2. Analytics Integration
- **File**: `apps/web/src/app/layout.tsx`
- **Actions**:
  - Added import: `import { Analytics } from '@vercel/analytics/next'`
  - Added `<Analytics />` component before the closing `</body>` tag in the root layout
- **Framework**: Next.js App Router (detected from existing layout structure)

### 3. Lock File Updates
- **File**: `package-lock.json`
- **Action**: Updated with new dependency tree for @vercel/analytics

## Implementation Details

The integration follows the official Vercel documentation for Next.js App Router projects:
- Analytics component is placed at the root layout level to track all pages
- Component is positioned before the closing body tag as recommended
- No environment variables are required for basic functionality
- Analytics will be active when deployed to Vercel

## Verification

✅ **Build Test**: Successfully built the project with `npm run build`
- Compilation completed without errors
- TypeScript validation passed
- All 39 pages generated successfully

✅ **TypeScript**: No type errors introduced (verified during build)

✅ **Code Structure**: Preserved existing code patterns and imports

## Next Steps for User

To enable analytics in the Vercel dashboard:
1. Deploy this code to Vercel
2. Navigate to Analytics in the Vercel dashboard sidebar
3. Select your project
4. Click "Enable" button
5. Verify analytics are working by checking the Network tab for requests to `/<unique-path>/view`

## Notes

- The libsodium initialization errors seen during build are pre-existing issues unrelated to the analytics installation
- The project uses npm as the package manager (detected from package-lock.json)
- All changes follow Next.js and Vercel best practices

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 apps/web/package.json       |  1 +
 apps/web/src/app/layout.tsx |  2 ++
 package-lock.json           | 48 +++++++++++++++++++++++++++++++++----
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/apps/web/package.json b/apps/web/package.json
index 4bb5701..d3d190f 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -14,6 +14,7 @@
     "@meshsdk/core": "^1.9.0-beta.102",
     "@meshsdk/react": "^1.1.0",
     "@tanstack/react-query": "^5.0.0",
+    "@vercel/analytics": "^2.0.1",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.0",
     "h3-js": "^4.1.0",
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 162d603..980e33a 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -4,6 +4,7 @@ import './globals.css'
 import Navbar from '@/components/Navbar'
 import SiteFooter from '@/components/SiteFooter'
 import { Providers } from '@/components/Providers'
+import { Analytics } from '@vercel/analytics/next'
 import 'mapbox-gl/dist/mapbox-gl.css'
 
 const interTight = Inter_Tight({
@@ -44,6 +45,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
           <main className="flex-grow">{children}</main>
           <SiteFooter />
         </Providers>
+        <Analytics />
       </body>
     </html>
   )
diff --git a/package-lock.json b/package-lock.json
index 71ed00c..fb685e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,6 +26,7 @@
         "@meshsdk/core": "^1.9.0-beta.102",
         "@meshsdk/react": "^1.1.0",
         "@tanstack/react-query": "^5.0.0",
+        "@vercel/analytics": "^2.0.1",
         "clsx": "^2.1.0",
         "framer-motion": "^11.0.0",
         "h3-js": "^4.1.0",
@@ -11609,6 +11610,48 @@
         "node": ">=20.0.0"
       }
     },
+    "node_modules/@vercel/analytics": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-2.0.1.tgz",
+      "integrity": "sha512-MTQG6V9qQrt1tsDeF+2Uoo5aPjqbVPys1xvnIftXSJYG2SrwXRHnqEvVoYID7BTruDz4lCd2Z7rM1BdkUehk2g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@remix-run/react": "^2",
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "nuxt": ">= 3",
+        "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
+        },
+        "nuxt": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@vercel/backends": {
       "version": "0.0.60",
       "resolved": "https://registry.npmjs.org/@vercel/backends/-/backends-0.0.60.tgz",
@@ -21052,10 +21095,6 @@
       "resolved": "contracts/evm",
       "link": true
     },
-    "node_modules/malama-sdk": {
-      "resolved": "packages/sdk",
-      "link": true
-    },
     "node_modules/mapbox-gl": {
       "version": "3.20.0",
       "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-3.20.0.tgz",
@@ -31873,6 +31912,7 @@
     "packages/sdk": {
       "name": "malama-sdk",
       "version": "0.1.0",
+      "extraneous": true,
       "license": "MIT",
       "devDependencies": {
         "typescript": "^5.3.0"