Skip to content

Add Vercel Web Analytics to Next.js #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vercel wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Add Vercel Web Analytics to Next.js #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 42 additions & 0 deletions portfolio/.vade-report
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# Vercel Web Analytics Implementation

## Summary
Successfully installed and configured Vercel Web Analytics for this Next.js App Router project.

## Changes Made

### 1. Package Installation
- Installed `@vercel/analytics` version 1.6.1
- Added to project dependencies in package.json
- Updated package-lock.json with new dependency tree

### 2. Analytics Component Integration
Modified: `app/layout.tsx`
- Added import statement: `import { Analytics } from "@vercel/analytics/next"`
- Added `<Analytics />` component inside the `<body>` tag, after the `{children}` element
- Placement ensures analytics tracks all pages while maintaining existing layout structure

## Implementation Details

The Analytics component was added to the root layout file (`app/layout.tsx`) which is the standard approach for Next.js App Router projects. This ensures that:
- Analytics tracking is enabled across all pages
- The component is loaded once at the root level
- Existing functionality (Particles, conditional rendering based on pathname) remains unchanged

## Code Structure
The implementation preserves the existing code structure:
- Maintains the "use client" directive
- Keeps all existing imports and font configurations
- Preserves the conditional Particles rendering logic
- Places Analytics at the end of the body tag as recommended

## Verification
- Package successfully installed via npm
- Dependencies properly updated in package.json and package-lock.json
- TypeScript types are included with the @vercel/analytics package
- Code follows Next.js best practices for App Router

## Notes
- The Analytics component will automatically begin tracking page views once deployed to Vercel
- No additional configuration is required unless custom event tracking is needed
- The component is lightweight and won't impact page load performance
2 changes: 2 additions & 0 deletions portfolio/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

import { Inter, JetBrains_Mono } from "next/font/google";
import { usePathname } from "next/navigation";
import { Analytics } from "@vercel/analytics/next";
import "./globals.css";
import Particles from "@/components/common/Particles";

Expand Down Expand Up @@ -39,6 +40,7 @@ export default function RootLayout({
)}

{children}
<Analytics />
</body>
</html>
);
Expand Down
39 changes: 39 additions & 0 deletions portfolio/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions portfolio/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
"@tsparticles/engine": "^3.9.1",
"@tsparticles/react": "^3.0.0",
"@tsparticles/slim": "^3.9.1",
"@vercel/analytics": "^1.6.1",
"lucide-react": "0.562.0",
"next": "16.1.4",
"react": "^18.2.0",
Expand Down