Skip to content

Commit e986936

Browse files
committed
Add Vercel Web Analytics integration
Implemented Vercel Web Analytics for Next.js App Router ## Overview Successfully installed and configured Vercel Web Analytics following the latest official documentation from https://vercel.com/docs/analytics/quickstart. ## Changes Made ### 1. Package Installation - Installed `@vercel/analytics` version 2.0.1 using npm - Updated package.json to include the new dependency - Updated package-lock.json with the new package and its dependencies ### 2. Analytics Integration (src/app/layout.tsx) - Added import statement: `import { Analytics } from "@vercel/analytics/next";` - Added `<Analytics />` component inside the `<body>` tag in the RootLayout component - Followed Next.js App Router specific instructions as documented ## Implementation Details The Analytics component was placed at the end of the body tag to ensure it doesn't block the initial page render. This placement follows Vercel's recommended best practices for Next.js App Router applications. ## Verification Steps Completed 1. ✅ Installed dependencies successfully using npm 2. ✅ Updated lock file (package-lock.json) 3. ✅ Ran linter on modified files - no errors introduced 4. ✅ Ran tests - no breakages (0 tests existed, all passed) 5. ✅ Build verification - build error is pre-existing (missing ImageKit configuration), unrelated to Analytics changes ## Notes - The project uses Next.js 16.3.8 with the App Router pattern - Analytics component is framework-agnostic and will work in both development and production - The Analytics component automatically handles production vs. development environments - After deployment to Vercel, analytics data will be available in the project's Analytics dashboard - No additional configuration is required; the Analytics component will automatically connect to Vercel's analytics service when deployed ## Next Steps for Project Maintainers 1. Deploy the application to Vercel 2. Enable Web Analytics in the Vercel dashboard for your project (if not already enabled) 3. Visit deployed pages to generate analytics data 4. View analytics in the Vercel dashboard under the Analytics section Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
1 parent 359aaeb commit e986936

3 files changed

Lines changed: 49 additions & 1 deletion

File tree

‎package-lock.json‎

Lines changed: 43 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
},
1414
"dependencies": {
1515
"@supabase/supabase-js": "^2.117.2",
16+
"@vercel/analytics": "^2.0.1",
1617
"gsap": "^3.15.0",
1718
"imagekit": "^6.0.0",
1819
"next": "16.3.8",

‎src/app/layout.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Metadata, Viewport } from "next";
22
import { DM_Serif_Display, Manrope } from "next/font/google";
3+
import { Analytics } from "@vercel/analytics/next";
34
import { INDEXABLE, SITE_DESCRIPTION, SITE_NAME, SITE_TITLE, SITE_URL } from "@/config/site";
45
import { TITLE_TEMPLATE } from "@/lib/seo";
56
import "./globals.css";
@@ -43,7 +44,10 @@ export const viewport: Viewport = {
4344
export default function RootLayout({ children }: LayoutProps<"/">) {
4445
return (
4546
<html lang="en" className={`${dmSerif.variable} ${manrope.variable}`}>
46-
<body>{children}</body>
47+
<body>
48+
{children}
49+
<Analytics />
50+
</body>
4751
</html>
4852
);
4953
}

0 commit comments

Comments
 (0)