Add Vercel Speed Insights to Next.js (#420)
Successfully implemented Vercel Speed Insights for Next.js
## Changes Made
### 1. Installed @vercel/speed-insights package
- Used pnpm (the project's package manager) to install @vercel/speed-insights@1.3.1
- Updated package.json with the new dependency
- Updated pnpm-lock.yaml with the complete dependency tree
### 2. Integrated SpeedInsights component into root layout
- Modified: docs/src/app/layout.tsx
- Added import: `import { SpeedInsights } from "@vercel/speed-insights/next"`
- Added `<SpeedInsights />` component inside the `<body>` tag, placed after all other content
- This follows the recommended pattern for Next.js 13.5+ with App Router
## Implementation Details
The project uses:
- Next.js 16.1.1 with App Router
- TypeScript
- pnpm as the package manager
The SpeedInsights component was added to the root layout (app/layout.tsx) which is the correct approach for Next.js 13.5+ projects using the App Router. The component is placed at the end of the body tag to ensure it loads after the main content.
## Verification
✅ Build completed successfully - no compilation errors
✅ All changes staged with git including the lockfile
✅ Package installed and integrated correctly
Note: Pre-existing linter warnings in mobile-nav-context.tsx and theme-toggle.tsx were not introduced by these changes and remain unchanged.
## Files Modified
1. docs/package.json - Added @vercel/speed-insights dependency
2. docs/pnpm-lock.yaml - Updated with new package dependencies
3. docs/src/app/layout.tsx - Added SpeedInsights import and component
The implementation follows Vercel's official documentation and best practices for Next.js App Router applications.
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
This commit is contained in:
co-authored by
Vercel <vercel[bot]@users.noreply.github.com>
parent
ec9c6a2ed9
commit
b3b9fccd72
@@ -17,6 +17,7 @@
|
||||
"@streamdown/code": "^1.0.2",
|
||||
"@upstash/ratelimit": "^2.0.8",
|
||||
"@upstash/redis": "^1.36.2",
|
||||
"@vercel/speed-insights": "^1.3.1",
|
||||
"ai": "^6.0.78",
|
||||
"bash-tool": "^1.3.14",
|
||||
"clsx": "^2.1.1",
|
||||
|
||||
Reference in New Issue
Block a user