From b75ad7207a07c03495fba78728f501d91d1ca97c Mon Sep 17 00:00:00 2001 From: Vercel Date: Fri, 2 Jan 2026 04:38:31 +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 ### Summary Successfully installed and configured Vercel Web Analytics for the GitHub-Wrapped Next.js application using the App Router pattern. ### What Was Implemented 1. **Installed @vercel/analytics package** - Used npm (the project's package manager) to install `@vercel/analytics` version 1.6.1 - Updated package.json and package-lock.json 2. **Added Analytics Component to Root Layout** - File modified: `src/app/layout.tsx` - Imported `Analytics` from `@vercel/analytics/next` - Added `` component inside the `` tag after the `` component - The Analytics component will now track page views and other web vitals data ### Files Changed - **src/app/layout.tsx** - Added import and Analytics component - **package.json** - Added @vercel/analytics as a dependency - **package-lock.json** - Updated lock file with new dependency ### Implementation Details - The project uses the **App Router** pattern (files are in `src/app/`) - The Analytics component is correctly placed in the root layout file to track all pages - The component was inserted after `` to ensure it doesn't interfere with existing provider logic - The Analytics component from '@vercel/analytics/next' is the appropriate import for App Router projects ### Verification ✓ Build completed successfully with no errors ✓ TypeScript compilation passed ✓ Linter (ESLint) passed with no warnings or errors ✓ All pages generated correctly during build ### Notes - The Analytics component is a client-side component that collects anonymous usage data - It will automatically track Core Web Vitals and custom events - No configuration is required; it works out of the box - The data will be visible in Vercel's Analytics dashboard when deployed to Vercel Co-authored-by: Vercel --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/app/layout.tsx | 2 ++ 3 files changed, 42 insertions(+) diff --git a/package-lock.json b/package-lock.json index ecfcb37..92b44d4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@octokit/core": "^7.0.6", "@octokit/graphql": "^9.0.3", + "@vercel/analytics": "^1.6.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "framer-motion": "^12.23.26", @@ -2382,6 +2383,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/acorn": { "version": "8.15.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz", diff --git a/package.json b/package.json index d4f592e..f7de292 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@octokit/core": "^7.0.6", "@octokit/graphql": "^9.0.3", + "@vercel/analytics": "^1.6.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", "framer-motion": "^12.23.26", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9d11dfe..b0a3f40 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from "next"; +import { Analytics } from "@vercel/analytics/next"; import "./globals.css"; import Providers from "@/components/Providers"; @@ -16,6 +17,7 @@ export default function RootLayout({ {children} + );