diff --git a/web/.vade-report b/web/.vade-report
new file mode 100644
index 0000000..feb017f
--- /dev/null
+++ b/web/.vade-report
@@ -0,0 +1,47 @@
+## Vercel Web Analytics Implementation
+
+Successfully installed and configured Vercel Web Analytics for the budgetr Next.js application.
+
+### Changes Made
+
+**Modified Files:**
+1. `app/layout.tsx` - Added Analytics component to root layout
+2. `package.json` - Added @vercel/analytics dependency (v2.0.1)
+3. `package-lock.json` - Updated lock file with new dependency
+
+### Implementation Details
+
+Following the official Vercel documentation (https://vercel.com/docs/analytics/quickstart), I:
+
+1. **Installed the Package**: Added `@vercel/analytics` v2.0.1 using npm
+2. **Imported Analytics Component**: Added `import { Analytics } from "@vercel/analytics/next"` to the root layout
+3. **Added Component to DOM**: Placed `` at the end of the `` tag in the root layout
+
+### Code Changes
+
+In `app/layout.tsx`:
+- Added import statement for Analytics component from @vercel/analytics/next
+- Added `` component inside the body tag, after the children
+- Preserved existing code structure, theme script, and all existing functionality
+
+### Testing & Verification
+
+✅ Linter passed with no errors (only 2 pre-existing warnings unrelated to changes)
+✅ Build completed successfully with Next.js 16.2.6 (Turbopack)
+✅ All 461 tests passed across 46 test files
+✅ Local packages (@budgetr/core and @budgetr/sync-crypto) built successfully
+
+### Next Steps
+
+To complete the setup:
+1. Deploy the application to Vercel
+2. Enable Web Analytics in the Vercel dashboard (Analytics section)
+3. Verify analytics tracking by checking browser Network tab for requests to `//view`
+4. Monitor analytics data in the Vercel dashboard (appears within a few days of visitor activity)
+
+### Notes
+
+- The Analytics component is lightweight and non-blocking
+- It automatically tracks page views in the Next.js App Router
+- No additional configuration is required in the code
+- Analytics will only work when deployed on Vercel (not in local development)
diff --git a/web/app/layout.tsx b/web/app/layout.tsx
index e299bc1..d61f395 100644
--- a/web/app/layout.tsx
+++ b/web/app/layout.tsx
@@ -1,5 +1,6 @@
import type { Metadata, Viewport } from "next";
import { Fraunces, Hanken_Grotesk, Spline_Sans_Mono } from "next/font/google";
+import { Analytics } from "@vercel/analytics/next";
import { THEME_SCRIPT } from "@/lib/theme";
import { SITE } from "@/lib/site";
import "./globals.css";
@@ -88,6 +89,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
wrong palette; the toggle keeps the cookie + attribute in sync. */}
{children}
+
);
diff --git a/web/package-lock.json b/web/package-lock.json
index 2de2175..efd1bad 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -7,9 +7,11 @@
"": {
"name": "budgetr",
"version": "0.14.2",
+ "hasInstallScript": true,
"dependencies": {
"@budgetr/core": "file:../packages/core",
"@budgetr/sync-crypto": "file:../packages/sync-crypto",
+ "@vercel/analytics": "^2.0.1",
"better-sqlite3": "^12.11.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -3941,6 +3943,48 @@
"win32"
]
},
+ "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/@vitest/expect": {
"version": "4.1.9",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.1.9.tgz",
diff --git a/web/package.json b/web/package.json
index 6f5d3e9..7737e02 100644
--- a/web/package.json
+++ b/web/package.json
@@ -34,6 +34,7 @@
"dependencies": {
"@budgetr/core": "file:../packages/core",
"@budgetr/sync-crypto": "file:../packages/sync-crypto",
+ "@vercel/analytics": "^2.0.1",
"better-sqlite3": "^12.11.1",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",