From a80100b5e415c8c447801bc505b7c1881b64ade9 Mon Sep 17 00:00:00 2001 From: Vercel Date: Fri, 6 Mar 2026 16:59:59 +0000 Subject: [PATCH] Add Vercel Speed Insights to Next.js MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Implemented Vercel Speed Insights for Next.js Application ## Summary Successfully installed and configured Vercel Speed Insights for the BioNXA learning platform, a Next.js 14 application using the App Router with internationalization. ## Changes Made ### 1. Package Installation - Installed `@vercel/speed-insights` version 1.3.1 - Updated `package.json` to include the new dependency - Updated `package-lock.json` with the complete dependency tree ### 2. Component Integration Modified `app/[locale]/layout.tsx`: - Added import: `import { SpeedInsights } from '@vercel/speed-insights/next';` - Added `` component inside the `` tag, after the main content and within the ThemeProvider - Component placement follows Next.js 14 App Router best practices for analytics components ## Implementation Details The project structure indicated: - Next.js version 14.0.4 (supports App Router) - Internationalized routing with `next-intl` library - Main layout located at `app/[locale]/layout.tsx` with locale-based routing - Existing analytics setup with Google Analytics The SpeedInsights component was added to the locale layout file because: 1. This is the actual root layout that renders the `` and `` tags 2. The `app/layout.tsx` file only acts as a wrapper for the locale routing 3. Placing it here ensures Speed Insights runs on all pages across all locales ## Verification ✅ Build completed successfully with no errors ✅ TypeScript compilation passed ✅ All static pages generated correctly (5/5) ✅ Bundle sizes are within normal ranges ✅ Package dependencies installed and locked ## Files Modified - `app/[locale]/layout.tsx` - Added SpeedInsights component - `package.json` - Added @vercel/speed-insights dependency - `package-lock.json` - Updated with new dependency tree ## Notes - The ESLint configuration has a pre-existing issue with circular references in the FlatCompat setup, but this is unrelated to our changes - The build and type-checking passed successfully, confirming the changes are valid - Speed Insights will automatically track page navigation and performance metrics when deployed to Vercel - The component placement after {children} ensures it doesn't interfere with page rendering Co-authored-by: Vercel --- app/[locale]/layout.tsx | 2 ++ package-lock.json | 35 +++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 38 insertions(+) diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx index 05a6ee000c..507e1bb501 100644 --- a/app/[locale]/layout.tsx +++ b/app/[locale]/layout.tsx @@ -6,6 +6,7 @@ import '../globals.css'; import type { Metadata } from 'next'; import { GoogleAnalytics } from '@/components/GoogleAnalytics'; import { ThemeProvider } from '@/components/ThemeProvider'; +import { SpeedInsights } from '@vercel/speed-insights/next'; export const metadata: Metadata = { title: 'BioNXA — Master Bioinformatics, Your Way', @@ -50,6 +51,7 @@ export default async function LocaleLayout({ {children} + diff --git a/package-lock.json b/package-lock.json index 86144062de..913081a123 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@monaco-editor/react": "^4.6.0", "@supabase/ssr": "^0.8.0", "@supabase/supabase-js": "^2.95.2", + "@vercel/speed-insights": "^1.3.1", "framer-motion": "^12.33.0", "lucide-react": "^0.302.0", "marked": "^11.1.1", @@ -6748,6 +6749,40 @@ "execa": "5" } }, + "node_modules/@vercel/speed-insights": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/@vercel/speed-insights/-/speed-insights-1.3.1.tgz", + "integrity": "sha512-PbEr7FrMkUrGYvlcLHGkXdCkxnylCWePx7lPxxq36DNdfo9mcUjLOmqOyPDHAOgnfqgGGdmE3XI9L/4+5fr+vQ==", + "license": "Apache-2.0", + "peerDependencies": { + "@sveltejs/kit": "^1 || ^2", + "next": ">= 13", + "react": "^18 || ^19 || ^19.0.0-rc", + "svelte": ">= 4", + "vue": "^3", + "vue-router": "^4" + }, + "peerDependenciesMeta": { + "@sveltejs/kit": { + "optional": true + }, + "next": { + "optional": true + }, + "react": { + "optional": true + }, + "svelte": { + "optional": true + }, + "vue": { + "optional": true + }, + "vue-router": { + "optional": true + } + } + }, "node_modules/@vercel/static-build": { "version": "2.8.45", "resolved": "https://registry.npmjs.org/@vercel/static-build/-/static-build-2.8.45.tgz", diff --git a/package.json b/package.json index 5e80749278..f3926580ba 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "@monaco-editor/react": "^4.6.0", "@supabase/ssr": "^0.8.0", "@supabase/supabase-js": "^2.95.2", + "@vercel/speed-insights": "^1.3.1", "framer-motion": "^12.33.0", "lucide-react": "^0.302.0", "marked": "^11.1.1",