Add Vercel Speed Insights to Next.js

vercel[bot] · vercel[bot] · commit 7fc8693b26a6 · 2026-01-17T23:25:03.000Z
Implemented Vercel Speed Insights integration for Next.js

WHAT WAS IMPLEMENTED:
Successfully installed and configured Vercel Speed Insights for the CodeStorm Hub Next.js project (version 15.5.9 with App Router).

CHANGES MADE:

1. Package Installation
   - Installed @vercel/speed-insights@^1.3.1 via npm
   - Updated package.json with new dependency
   - Updated package-lock.json to lock dependency versions

2. Root Layout Configuration (src/app/layout.tsx)
   - Added import: `import { SpeedInsights } from "@vercel/speed-insights/next";`
   - Added `&lt;SpeedInsights /&gt;` component inside the &lt;body&gt; tag, positioned after the Analytics component
   - Component placement ensures it can track Core Web Vitals and other performance metrics

IMPLEMENTATION DETAILS:
- Used the '@vercel/speed-insights/next' import (appropriate for Next.js 13.5+ with App Router)
- Placed the SpeedInsights component within the body tag as recommended, after the existing Analytics component
- Maintained existing code structure and preserved all other functionality
- No changes required to existing components or configuration

VERIFICATION COMPLETED:
✓ Type checking passed (npm run type-check)
✓ Linting passed (npm run lint)
✓ Production build successful (npm run build) - all 22 pages generated successfully
✓ No errors or warnings introduced

NOTES:
- The project already had Vercel Analytics (@vercel/analytics) installed, so the Speed Insights integration complements the existing monitoring setup
- Speed Insights will automatically collect performance data and send it to the Vercel dashboard
- The component is production-ready and requires no additional configuration

Co-authored-by: Vercel &lt;vercel[bot]@users.noreply.github.com&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,6 +19,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-toast": "^1.2.15",
     "@vercel/analytics": "^1.6.1",
+    "@vercel/speed-insights": "^1.3.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "gray-matter": "^4.0.3",
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Analytics } from "@vercel/analytics/next";
+import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Header } from "@/components/layout/header";
 import { Footer } from "@/components/layout/footer";
 import { SkipLinks } from "@/components/ui/skip-links";
@@ -66,6 +67,7 @@ export default function RootLayout({
           </div>
         </ThemeProvider>
         <Analytics />
+        <SpeedInsights />
       </body>
     </html>
   );
