204f3a1249
Implemented Vercel Web Analytics for Next.js
Summary:
Successfully installed and configured Vercel Web Analytics in this Next.js App Router project.
Changes Made:
1. Installed @vercel/analytics package:
- Added @vercel/analytics@^1.6.1 to package.json dependencies
- Updated package-lock.json with new dependency tree
2. Modified app/layout.tsx:
- Added import statement: import { Analytics } from '@vercel/analytics/next'
- Added <Analytics /> component inside the <body> tag, after <SpeedInsights />
- Maintained existing code structure and formatting
3. Verification:
- Build completed successfully with no errors (npm run build)
- No linting errors (no lint script configured in project)
- No test failures (no test script configured in project)
- All changes follow Next.js App Router best practices
Implementation Details:
- The Analytics component is placed at the end of the body tag, following the existing pattern used for SpeedInsights
- The component will automatically track page views and Web Vitals data
- Works seamlessly with the existing SpeedInsights integration
- No environment variables or additional configuration required
Files Modified:
- app/layout.tsx (added Analytics import and component)
- package.json (added @vercel/analytics dependency)
- package-lock.json (updated with new dependency tree)
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
26 lines
587 B
JSON
26 lines
587 B
JSON
{
|
|
"name": "portfolio",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev --turbopack",
|
|
"build": "next build --turbopack",
|
|
"start": "next start"
|
|
},
|
|
"dependencies": {
|
|
"@vercel/analytics": "^1.6.1",
|
|
"@vercel/speed-insights": "^1.3.1",
|
|
"framer-motion": "^12.33.0",
|
|
"next": "^15.5.12",
|
|
"react": "19.1.0",
|
|
"react-dom": "19.1.0"
|
|
},
|
|
"devDependencies": {
|
|
"@tailwindcss/postcss": "^4",
|
|
"@types/node": "^20",
|
|
"@types/react": "^19",
|
|
"@types/react-dom": "^19",
|
|
"tailwindcss": "^4",
|
|
"typescript": "^5"
|
|
}
|
|
}
|