From d056febf16456c519f40252cbcf11972319d327f Mon Sep 17 00:00:00 2001
From: Vercel <vercel[bot]@users.noreply.github.com>
Date: Sun, 26 Apr 2026 17:56:46 +0000
Subject: [PATCH] Install Vercel Speed Insights
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Vercel Speed Insights Installation

Successfully installed and configured Vercel Speed Insights for this Next.js project.

### Changes Made:

1. **Installed Package:**
   - Added `@vercel/speed-insights` (v2.0.0) to dependencies

2. **Modified Files:**
   - `app/layout.tsx`: Added SpeedInsights component to root layout
     - Added import: `import { SpeedInsights } from "@vercel/speed-insights/next"`
     - Added component to body (after Footer component)
   - `package.json`: Added `@vercel/speed-insights` to dependencies
   - `package-lock.json`: Updated with new dependency tree

### Implementation Details:

Following the official Vercel documentation (https://vercel.com/docs/speed-insights/quickstart), I:
- Used the framework-specific import for Next.js App Router: `@vercel/speed-insights/next`
- Placed the `<SpeedInsights />` component in the root layout's body tag
- Preserved all existing code structure and styling
- The component was added after the Footer component, as recommended by the docs

### Verification:

✅ Build completed successfully (`npm run build`)
✅ No TypeScript errors
✅ Lock file updated correctly (npm)
✅ All changes staged and ready for commit

### Next Steps:

The Speed Insights component is now ready to track performance metrics. Note that according to the Vercel documentation, Speed Insights must be enabled in the Vercel dashboard for the tracking to become active in production deployments.

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
---
 app/layout.tsx    |  2 ++
 package-lock.json | 39 +++++++++++++++++++++++++++++++++++++++
 package.json      |  1 +
 3 files changed, 42 insertions(+)

diff --git a/app/layout.tsx b/app/layout.tsx
index 66a287c..fbb9988 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -3,6 +3,7 @@ import { JetBrains_Mono, Inter } from "next/font/google"
 import "./globals.css"
 import { Nav } from "@/components/Nav"
 import { Footer } from "@/components/Footer"
+import { SpeedInsights } from "@vercel/speed-insights/next"
 
 const jetbrainsMono = JetBrains_Mono({
   variable: "--font-jetbrains-mono",
@@ -52,6 +53,7 @@ export default function RootLayout({
         <Nav />
         <main className="flex-1">{children}</main>
         <Footer />
+        <SpeedInsights />
       </body>
     </html>
   )
diff --git a/package-lock.json b/package-lock.json
index 8c20a42..0c0129f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "solidstate-skills",
       "version": "0.1.0",
       "dependencies": {
+        "@vercel/speed-insights": "^2.0.0",
         "geist": "^1.7.0",
         "next": "16.2.3",
         "react": "19.2.4",
@@ -2140,6 +2141,44 @@
         "win32"
       ]
     },
+    "node_modules/@vercel/speed-insights": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-2.0.0.tgz",
+      "integrity": "sha512-jwkNcrTeafWxjmWq4AHBaptSqZiJkYU5adLC9QBSqeim0GcqDMgN5Ievh8OG1rJ6W3A4l1oiP7qr9CWxGuzu3w==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "@sveltejs/kit": "^1 || ^2",
+        "next": ">= 13",
+        "nuxt": ">= 3",
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "svelte": ">= 4",
+        "vue": "^3",
+        "vue-router": "^4"
+      },
+      "peerDependenciesMeta": {
+        "@sveltejs/kit": {
+          "optional": true
+        },
+        "next": {
+          "optional": true
+        },
+        "nuxt": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        },
+        "vue": {
+          "optional": true
+        },
+        "vue-router": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/acorn": {
       "version": "8.16.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
diff --git a/package.json b/package.json
index d2a855a..53d7e17 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
     "lint": "eslint"
   },
   "dependencies": {
+    "@vercel/speed-insights": "^2.0.0",
     "geist": "^1.7.0",
     "next": "16.2.3",
     "react": "19.2.4",