74ebc52437
## Vercel Speed Insights Implementation Successfully installed and configured Vercel Speed Insights for this Next.js portfolio project. ### What was implemented: 1. **Installed @vercel/speed-insights package** - Used npm (the project's package manager) to install `@vercel/speed-insights` v1.3.1 - Updated package.json and package-lock.json with the new dependency 2. **Added SpeedInsights component to root layout** - Modified `app/layout.tsx` to import SpeedInsights from '@vercel/speed-insights/next' - Added the `<SpeedInsights />` component inside the `<body>` tag, after the main content - Placement follows Next.js App Router best practices for Next.js 15.5.12 ### Files Modified: - `app/layout.tsx` - Added import and component - `package.json` - Added @vercel/speed-insights dependency - `package-lock.json` - Updated with new dependency tree ### Implementation Details: - The project uses Next.js 15.5.12 with App Router, which is newer than 13.5+ - Used the simplified approach: imported from '@vercel/speed-insights/next' - No 'use client' directive needed as the package handles this internally - The component is placed at the end of the body tag for optimal performance ### Verification: - Build completed successfully with `npm run build` - No errors or warnings introduced - All changes have been staged with git The Speed Insights component will now automatically track Core Web Vitals and send analytics data to Vercel when deployed. Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
25 lines
552 B
JSON
25 lines
552 B
JSON
{
|
|
"name": "portfolio",
|
|
"version": "0.1.0",
|
|
"private": true,
|
|
"scripts": {
|
|
"dev": "next dev --turbopack",
|
|
"build": "next build --turbopack",
|
|
"start": "next start"
|
|
},
|
|
"dependencies": {
|
|
"@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"
|
|
}
|
|
}
|