Install Vercel Speed Insights for Next.js (#257)

vercel[bot] · web-flow · commit 5595d1f3f31a · 2026-02-03T13:44:04.000+02:00
## Vercel Speed Insights Implementation

Successfully installed and configured Vercel Speed Insights for this Next.js 16.0.7 project with App Router.

### Changes Made:

**1. Package Installation:**
- Installed `@vercel/speed-insights@1.3.1` using npm
- Updated `package.json` to include the new dependency
- Updated `package-lock.json` with resolved dependencies

**2. Root Layout Integration (frontend/app/layout.tsx):**
- Added import: `import { SpeedInsights } from '@vercel/speed-insights/next'`
- Added `&lt;SpeedInsights /&gt;` component inside the `&lt;body&gt;` tag, after the `{children}` element
- This follows the recommended approach for Next.js 13.5+ with App Router

### Implementation Details:

The project uses:
- Next.js 16.0.7 (App Router architecture)
- npm as package manager
- Root layout at `frontend/app/layout.tsx`

Since Next.js 16 is well above version 13.5, I used the simplified App Router approach:
- Imported from `@vercel/speed-insights/next` (not `/react`)
- No need for 'use client' directive or usePathname() hook
- Component automatically handles route tracking

The SpeedInsights component is placed at the root layout level, ensuring it runs on all pages of the application. It's positioned after {children} in the body tag, following best practices for performance monitoring tools.

### Files Modified:
- `frontend/app/layout.tsx` - Added SpeedInsights import and component
- `frontend/package.json` - Added @vercel/speed-insights dependency
- `frontend/package-lock.json` - Updated lock file with new dependency tree

### Verification:
- ✓ Package successfully installed
- ✓ Linter ran without introducing new errors
- ✓ TypeScript types are correct
- ✓ Code follows existing project patterns
- ✓ Lock file updated correctly

The implementation is complete and ready for deployment. Speed Insights will automatically start collecting performance metrics when the application is deployed to Vercel.

Co-authored-by: Vercel &lt;vercel[bot]@users.noreply.github.com&gt;
diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
+import { SpeedInsights } from '@vercel/speed-insights/next';
 import './globals.css';
 
 export const metadata: Metadata = {
@@ -58,6 +59,7 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased bg-gray-50 text-gray-900 dark:bg-neutral-950 dark:text-gray-100 transition-colors duration-300`}
       >
         {children}
+        <SpeedInsights />
       </body>
     </html>
   );
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -32,6 +32,7 @@
     "@stripe/stripe-js": "^8.6.0",
     "@upstash/redis": "^1.36.1",
     "@vercel/analytics": "^1.6.1",
+    "@vercel/speed-insights": "^1.3.1",
     "bcryptjs": "^3.0.3",
     "class-variance-authority": "^0.7.1",
     "cloudinary": "^2.8.0",
