Repository navigation
Install and configure Vercel Speed Insights - #6
Merged
Merged
Conversation
# Vercel Speed Insights Installation Successfully installed and configured Vercel Speed Insights for this Next.js project. ## Changes Made ### 1. Package Installation - Installed `@vercel/speed-insights` version 2.0.0 using pnpm - Package added to dependencies in `package.json` - Updated `pnpm-lock.yaml` with new dependency tree ### 2. Code Integration Modified `app/layout.tsx`: - Imported `SpeedInsights` component from `@vercel/speed-insights/next` - Added `<SpeedInsights />` component to the root layout's body - Configured to only render in production environment (matching existing Analytics pattern) - Placed alongside the existing Vercel Analytics component ## Implementation Details The implementation follows the official Vercel Speed Insights documentation for Next.js App Router (v13.5+): - Used the framework-specific import path: `@vercel/speed-insights/next` - Added the component to the root layout file for global coverage - Applied conditional rendering based on NODE_ENV to avoid running in development ## Verification ✅ **Build Status**: Build completed successfully with no errors ✅ **Tests**: All 48 tests passed across 4 test files ✅ **TypeScript**: No type errors (build includes TypeScript validation) ## Files Modified - `app/layout.tsx` - Added SpeedInsights import and component - `package.json` - Added @vercel/speed-insights dependency - `pnpm-lock.yaml` - Updated lockfile with new dependencies ## Next Steps To enable Speed Insights in production: 1. Deploy the application to Vercel 2. Navigate to Speed Insights in the Vercel dashboard 3. Click "Enable" to activate data collection 4. The script will automatically start collecting performance metrics The SpeedInsights component will only be active in production builds and will not affect development or local testing. Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
Contributor
Author
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
maazghani
marked this pull request as ready for review
August 4, 2026 20:55
This branch was successfully deployed
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 Speed Insights Installation
Successfully installed and configured Vercel Speed Insights for this Next.js project.
Changes Made
1. Package Installation
@vercel/speed-insightsversion 2.0.0 using pnpmpackage.jsonpnpm-lock.yamlwith new dependency tree2. Code Integration
Modified
app/layout.tsx:SpeedInsightscomponent from@vercel/speed-insights/next<SpeedInsights />component to the root layout's bodyImplementation Details
The implementation follows the official Vercel Speed Insights documentation for Next.js App Router (v13.5+):
@vercel/speed-insights/nextVerification
✅ Build Status: Build completed successfully with no errors
✅ Tests: All 48 tests passed across 4 test files
✅ TypeScript: No type errors (build includes TypeScript validation)
Files Modified
app/layout.tsx- Added SpeedInsights import and componentpackage.json- Added @vercel/speed-insights dependencypnpm-lock.yaml- Updated lockfile with new dependenciesNext Steps
To enable Speed Insights in production:
The SpeedInsights component will only be active in production builds and will not affect development or local testing.
View Project · Speed Insights
Created by Maaz Ghani (maazg) with Vercel Agent