From 105f1130be020b80a3a305f78bbd62e2c1717b80 Mon Sep 17 00:00:00 2001 From: Vercel Date: Tue, 24 Feb 2026 15:24:53 +0000 Subject: [PATCH] Add Vercel Web Analytics to Next.js Implemented Vercel Web Analytics for Next.js App Router ## Changes Made: ### 1. Installed @vercel/analytics package - Used npm to install @vercel/analytics (version 1.6.1) - Package added to dependencies in package.json ### 2. Modified root layout file - File: src/app/[lang]/layout.tsx - Added import: `import { Analytics } from "@vercel/analytics/next"` - Added component inside the tag, placed after and before {children} ### 3. Build and Verification - Build completed successfully with no errors - Linter passed for the modified layout file (no new errors introduced) - The pre-existing linting errors in other files (wasm_exec.js, index.tsx, _wasm.ts) were not modified - No test suite exists in the project ## Files Modified: - package.json - Added @vercel/analytics dependency - package-lock.json - Updated with new package dependencies - src/app/[lang]/layout.tsx - Added Analytics component import and usage ## Implementation Details: The Analytics component was placed alongside the existing SpeedInsights component in the root layout, following the same pattern. This ensures that analytics tracking is enabled across all pages in the application since this is the root layout for the App Router structure with internationalization support ([lang] dynamic route). The implementation follows Next.js 16.1.1 best practices for App Router projects and maintains the existing code structure and formatting. Co-authored-by: Vercel --- package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++ package.json | 1 + src/app/[lang]/layout.tsx | 2 ++ 3 files changed, 42 insertions(+) diff --git a/package-lock.json b/package-lock.json index 4fa7f74..24bfd22 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@csstools/normalize.css": "^12.1.1", "@material/material-color-utilities": "^0.4.0", "@types/golang-wasm-exec": "^1.15.2", + "@vercel/analytics": "^1.6.1", "@vercel/speed-insights": "^1.3.1", "i18next": "^25.7.3", "i18next-resources-to-backend": "^1.2.1", @@ -2169,6 +2170,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/@vercel/speed-insights": { "version": "1.3.1", "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.3.1.tgz", diff --git a/package.json b/package.json index 484c794..a9cd909 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@csstools/normalize.css": "^12.1.1", "@material/material-color-utilities": "^0.4.0", "@types/golang-wasm-exec": "^1.15.2", + "@vercel/analytics": "^1.6.1", "@vercel/speed-insights": "^1.3.1", "i18next": "^25.7.3", "i18next-resources-to-backend": "^1.2.1", diff --git a/src/app/[lang]/layout.tsx b/src/app/[lang]/layout.tsx index 3196e9f..b6acede 100644 --- a/src/app/[lang]/layout.tsx +++ b/src/app/[lang]/layout.tsx @@ -3,6 +3,7 @@ import type { Metadata } from "next"; import { Geist, Geist_Mono } from "next/font/google"; import "./../globals.css"; import { SpeedInsights } from "@vercel/speed-insights/next" +import { Analytics } from "@vercel/analytics/next" const geistSans = Geist({ variable: "--font-geist-sans", @@ -29,6 +30,7 @@ export default async function RootLayout({children, params: paramsPromise,}: Rea + {children}