From ce9abf362a4c1c6e9e63e3bc3fe2fb5f1a8215f2 Mon Sep 17 00:00:00 2001 From: Vercel Date: Sat, 7 Mar 2026 11:21:21 +0000 Subject: [PATCH] Add Vercel Web Analytics to Next.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Vercel Web Analytics Implementation Successfully implemented Vercel Web Analytics for the Next.js App Router project. ### Changes Made 1. **Installed @vercel/analytics package** - Added @vercel/analytics as a dependency to package.json - Updated package-lock.json with the new dependency and its sub-dependencies 2. **Updated src/app/layout.tsx** - Added import statement: `import { Analytics } from '@vercel/analytics/next';` - Placed the `` component inside the `` tag, after the main content div - This ensures analytics are loaded on all pages since layout.tsx is the root layout ### Implementation Details The project uses Next.js 14.1.0 with the App Router architecture (app directory). The Analytics component was added to the root layout file (src/app/layout.tsx) which wraps all pages, ensuring analytics tracking is enabled across the entire application. The component placement follows Vercel's best practices: - Imported from '@vercel/analytics/next' (optimized for Next.js) - Placed within the tag for proper initialization - Positioned after the main content to avoid blocking page rendering ### Verification ✅ Build completed successfully (npm run build) ✅ Linter passed with no errors (npm run lint) ✅ No breaking changes introduced ✅ Lock files properly updated ### Files Modified - package.json - Added @vercel/analytics dependency - package-lock.json - Updated with new dependency tree - src/app/layout.tsx - Added Analytics import and component The implementation is production-ready and follows Next.js and Vercel best practices for web analytics integration. Co-authored-by: Vercel --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 37 +++++++++++++++++++------------------ src/app/layout.tsx | 2 ++ 3 files changed, 60 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index e8b661f..6e03538 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "wazivo", "version": "1.1.0", "dependencies": { + "@vercel/analytics": "^1.6.1", "axios": "^1.6.5", "clsx": "^2.1.0", "lucide-react": "^0.309.0", @@ -2523,6 +2524,44 @@ "win32" ] }, + "node_modules/@vercel/analytics": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/@vercel/analytics/-/analytics-1.6.1.tgz", + "integrity": "sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==", + "license": "MPL-2.0", + "peerDependencies": { + "@remix-run/react": "^2", + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "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 + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, "node_modules/@xmldom/xmldom": { "version": "0.8.11", "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.11.tgz", diff --git a/package.json b/package.json index bee2b7d..c1d2c38 100644 --- a/package.json +++ b/package.json @@ -16,37 +16,38 @@ "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"" }, "dependencies": { + "@vercel/analytics": "^1.6.1", + "axios": "^1.6.5", + "clsx": "^2.1.0", + "lucide-react": "^0.309.0", + "mammoth": "^1.6.0", "next": "^14.1.0", - "react": "^18.2.0", - "react-dom": "^18.2.0", "openai": "^4.26.0", - "axios": "^1.6.5", "pdf-parse": "^1.1.1", - "mammoth": "^1.6.0", - "tesseract.js": "^5.0.4", - "lucide-react": "^0.309.0", - "clsx": "^2.1.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", "tailwind-merge": "^2.2.0", + "tesseract.js": "^5.0.4", "zod": "^3.22.4" }, "devDependencies": { + "@playwright/test": "^1.41.0", + "@testing-library/jest-dom": "^6.1.5", + "@testing-library/react": "^14.1.2", + "@testing-library/user-event": "^14.5.1", + "@types/jest": "^29.5.11", "@types/node": "^20.11.5", + "@types/pdf-parse": "^1.1.4", "@types/react": "^18.2.48", "@types/react-dom": "^18.2.18", - "@types/pdf-parse": "^1.1.4", - "@types/jest": "^29.5.11", - "@testing-library/react": "^14.1.2", - "@testing-library/jest-dom": "^6.1.5", - "@testing-library/user-event": "^14.5.1", - "jest": "^29.7.0", - "jest-environment-jsdom": "^29.7.0", - "typescript": "^5.3.3", - "tailwindcss": "^3.4.1", - "postcss": "^8.4.33", "autoprefixer": "^10.4.17", "eslint": "^8.56.0", "eslint-config-next": "^14.1.0", + "jest": "^29.7.0", + "jest-environment-jsdom": "^29.7.0", + "postcss": "^8.4.33", "prettier": "^3.1.1", - "@playwright/test": "^1.41.0" + "tailwindcss": "^3.4.1", + "typescript": "^5.3.3" } } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index c8ef000..2b03b50 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,6 +1,7 @@ import type { Metadata } from 'next'; import { Inter } from 'next/font/google'; import Link from 'next/link'; +import { Analytics } from '@vercel/analytics/next'; import './globals.css'; const inter = Inter({ subsets: ['latin'] }); @@ -111,6 +112,7 @@ export default function RootLayout({ children }: { children: React.ReactNode }) + );