Install Vercel Web Analytics - #4
Draft
vercel[bot] wants to merge 1 commit into
Draft
Conversation
## Vercel Web Analytics Implementation ### Summary Successfully installed and configured Vercel Web Analytics for the Prismatic Next.js application following the latest official documentation from https://vercel.com/docs/analytics/quickstart. ### Project Details - **Framework**: Next.js 14.2.3 (App Router) - **Package Manager**: npm - **Installation Method**: Used `--legacy-peer-deps` flag to resolve peer dependency conflicts ### Changes Made #### 1. Package Installation - **File**: `package.json` - **Change**: Added `@vercel/analytics` version ^2.0.1 to dependencies - **Command Used**: `npm install @vercel/analytics --legacy-peer-deps` #### 2. Analytics Integration - **File**: `src/app/layout.tsx` - **Changes**: - Added import: `import { Analytics } from '@vercel/analytics/next';` - Added `<Analytics />` component at the end of the `<body>` tag (after existing content) This follows the Next.js App Router best practices as documented in the official Vercel Analytics quickstart guide. #### 3. Lock File Update - **File**: `package-lock.json` - **Change**: Updated to include @vercel/analytics and its dependencies (864 new packages) ### Implementation Notes 1. **Framework-Specific Approach**: Used the Next.js App Router specific import (`@vercel/analytics/next`) as this is a Next.js 14 project using the App Router pattern. 2. **Component Placement**: Placed the `<Analytics />` component at the end of the body, after the existing `<Providers>{children}</Providers>` component. This ensures analytics tracking is loaded while not blocking critical page content. 3. **Existing Analytics**: The project already has a custom Prismatic Analytics tracking SDK loaded via a Script component. The Vercel Analytics component will work alongside this existing tracking solution without conflicts. 4. **Peer Dependency Resolution**: Used `--legacy-peer-deps` flag during installation due to a vite version conflict with optional peer dependencies. This is a common and safe approach for Next.js projects that don't directly use the conflicting dependencies. ### Verification ✅ **Linting**: Passed with no ESLint warnings or errors ✅ **Build**: Production build completed successfully with all 185 pages generated ✅ **Type Checking**: TypeScript compilation succeeded with no errors ✅ **Tests**: No breaking changes (project has no test files configured) ### Next Steps To enable analytics data collection: 1. Ensure the project is deployed to Vercel 2. Enable Web Analytics in the Vercel dashboard under the project's Analytics settings 3. Analytics data will start appearing after users visit the deployed site ### Files Modified - `package.json` - Added @vercel/analytics dependency - `package-lock.json` - Updated with new package dependencies - `src/app/layout.tsx` - Added Analytics import and component Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Author
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Vercel Web Analytics Implementation
Summary
Successfully installed and configured Vercel Web Analytics for the Prismatic Next.js application following the latest official documentation from https://vercel.com/docs/analytics/quickstart.
Project Details
--legacy-peer-depsflag to resolve peer dependency conflictsChanges Made
1. Package Installation
package.json@vercel/analyticsversion ^2.0.1 to dependenciesnpm install @vercel/analytics --legacy-peer-deps2. Analytics Integration
src/app/layout.tsximport { Analytics } from '@vercel/analytics/next';<Analytics />component at the end of the<body>tag (after existing content)This follows the Next.js App Router best practices as documented in the official Vercel Analytics quickstart guide.
3. Lock File Update
package-lock.jsonImplementation Notes
Framework-Specific Approach: Used the Next.js App Router specific import (
@vercel/analytics/next) as this is a Next.js 14 project using the App Router pattern.Component Placement: Placed the
<Analytics />component at the end of the body, after the existing<Providers>{children}</Providers>component. This ensures analytics tracking is loaded while not blocking critical page content.Existing Analytics: The project already has a custom Prismatic Analytics tracking SDK loaded via a Script component. The Vercel Analytics component will work alongside this existing tracking solution without conflicts.
Peer Dependency Resolution: Used
--legacy-peer-depsflag during installation due to a vite version conflict with optional peer dependencies. This is a common and safe approach for Next.js projects that don't directly use the conflicting dependencies.Verification
✅ Linting: Passed with no ESLint warnings or errors
✅ Build: Production build completed successfully with all 185 pages generated
✅ Type Checking: TypeScript compilation succeeded with no errors
✅ Tests: No breaking changes (project has no test files configured)
Next Steps
To enable analytics data collection:
Files Modified
package.json- Added @vercel/analytics dependencypackage-lock.json- Updated with new package dependenciessrc/app/layout.tsx- Added Analytics import and componentView Project · Web Analytics
Created by qiangzhang2009 with Vercel Agent