From 03e19265fbdbbadb3dff75a504337f5136f559f5 Mon Sep 17 00:00:00 2001 From: Vercel Date: Thu, 2 Apr 2026 06:16:21 +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 Successfully installed and configured Vercel Web Analytics for this Next.js project. ### Changes Made **1. Installed Package** - Added `@vercel/analytics` version ^2.0.1 to project dependencies - Package manager: npm - Updated package-lock.json accordingly **2. Modified Files** - **src/app/layout.tsx**: Added Analytics component to the root layout - Imported `Analytics` from `@vercel/analytics/next` - Added `` component inside the `` tag, after `{children}` - Follows Next.js App Router best practices from official Vercel documentation **3. Package Manager Files** - **package.json**: Added @vercel/analytics dependency - **package-lock.json**: Updated with new dependency tree ### Implementation Details The implementation follows the official Vercel Web Analytics quickstart guide (fetched on April 2, 2026): - Used framework-specific integration for Next.js App Router - Analytics component placed in the root layout file (src/app/layout.tsx) - Preserves all existing code structure, imports, and styling - Analytics component renders last in the body to avoid interfering with page content ### Verification ✓ Build completed successfully (npm run build) ✓ Linter passed with no errors (npm run lint) ✓ TypeScript compilation successful ✓ No test suite configured (skipped) ### Next Steps To complete the setup: 1. Deploy this code to Vercel 2. Enable Web Analytics in your Vercel project dashboard (Analytics section) 3. After deployment, verify installation by checking browser Network tab for requests to `/_vercel/insights/*` 4. View collected analytics data in your Vercel project's Analytics dashboard The Analytics component will automatically collect page view data and send it to Vercel's analytics service when deployed. Co-authored-by: Vercel --- package-lock.json | 151 +++++++++++++-------------------------------- package.json | 1 + src/app/layout.tsx | 6 +- 3 files changed, 49 insertions(+), 109 deletions(-) diff --git a/package-lock.json b/package-lock.json index e36480b..a7656b4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "site", "version": "0.1.0", "dependencies": { + "@vercel/analytics": "^2.0.1", "framer-motion": "^12.38.0", "next": "16.2.2", "react": "19.2.4", @@ -599,9 +600,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -618,9 +616,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -637,9 +632,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -656,9 +648,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -675,9 +664,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -694,9 +680,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -713,9 +696,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -732,9 +712,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "LGPL-3.0-or-later", "optional": true, "os": [ @@ -751,9 +728,6 @@ "cpu": [ "arm" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -776,9 +750,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -801,9 +772,6 @@ "cpu": [ "ppc64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -826,9 +794,6 @@ "cpu": [ "riscv64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -851,9 +816,6 @@ "cpu": [ "s390x" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -876,9 +838,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -901,9 +860,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -926,9 +882,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "Apache-2.0", "optional": true, "os": [ @@ -1138,9 +1091,6 @@ "cpu": [ "arm64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -1157,9 +1107,6 @@ "cpu": [ "arm64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -1176,9 +1123,6 @@ "cpu": [ "x64" ], - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -1195,9 +1139,6 @@ "cpu": [ "x64" ], - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -1436,9 +1377,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -1456,9 +1394,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -1476,9 +1411,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -1496,9 +1428,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2049,9 +1978,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2066,9 +1992,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2083,9 +2006,6 @@ "ppc64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2100,9 +2020,6 @@ "riscv64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2117,9 +2034,6 @@ "riscv64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2134,9 +2048,6 @@ "s390x" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2151,9 +2062,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2168,9 +2076,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2236,6 +2141,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/acorn": { "version": "8.16.0", "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz", @@ -4829,9 +4776,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -4853,9 +4797,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -4877,9 +4818,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -4901,9 +4839,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ diff --git a/package.json b/package.json index d9fbb63..9443d1d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "eslint" }, "dependencies": { + "@vercel/analytics": "^2.0.1", "framer-motion": "^12.38.0", "next": "16.2.2", "react": "19.2.4", diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 06afb9d..e1ab69a 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,6 @@ import type { Metadata } from "next"; import { Inter, Space_Grotesk } from "next/font/google"; +import { Analytics } from "@vercel/analytics/next"; import "./globals.css"; const inter = Inter({ @@ -26,7 +27,10 @@ export default function RootLayout({ }>) { return ( - {children} + + {children} + + ); }