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:

vercel[bot]

2026-02-12 17:28:59 -06:00

committed by

GitHub

co-authored by

Vercel <vercel[bot]@users.noreply.github.com>

parent ec9c6a2ed9

commit b3b9fccd72

3 changed files with 70 additions and 0 deletions

									
										docs/src/app/layout.tsx
									
		+2
		
												View File
												
				@@ -7,6 +7,7 @@ import { Header } from "@/components/header";

				import { Sidebar } from "@/components/sidebar";

				import { DocsChat } from "@/components/docs-chat";

				import { cookies } from "next/headers";

				import { SpeedInsights } from "@vercel/speed-insights/next";

				const geist = Geist({

				  variable: "--font-geist",

				@@ -62,6 +63,7 @@ export default async function RootLayout({

				            <DocsChat defaultOpen={chatOpen} defaultWidth={chatWidth} />

				          </MobileNavProvider>

				        </ThemeProvider>

				        <SpeedInsights />

				      </body>

				    </html>

				  );