oimwiodev/chrome-use
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add Vercel Web Analytics to Next.js (#428)

Browse Source 
Implemented Vercel Web Analytics for Next.js (App Router)

## Summary
Successfully installed and configured @vercel/analytics package for the Next.js documentation site.

## Changes Made

### 1. Installed Dependencies
- Installed `@vercel/analytics` package using pnpm
- Command executed: `pnpm install @vercel/analytics`

### 2. Modified Files
- **docs/src/app/layout.tsx**
  - Added import: `import { Analytics } from "@vercel/analytics/next";`
  - Added `<Analytics />` component inside the `<body>` tag, right after `<SpeedInsights />`
  - Placement follows best practices for App Router projects

### 3. Updated Lock Files
- **docs/package.json** - Added @vercel/analytics to dependencies
- **docs/pnpm-lock.yaml** - Updated with new dependency tree

## Implementation Details
- This is an App Router project (uses `app/` directory structure)
- The Analytics component was added to the root layout file at `docs/src/app/layout.tsx`
- Followed the same pattern as the existing SpeedInsights component
- Preserved all existing code structure and formatting

## Verification
✅ Build completed successfully with no errors
✅ TypeScript compilation passed
✅ Modified file passes ESLint checks
✅ All 15 static pages generated correctly

## Notes
- The project already had @vercel/speed-insights installed, so the pattern for adding Analytics was consistent
- Pre-existing lint errors in mobile-nav-context.tsx and theme-toggle.tsx are unrelated to this change
- Lock files are properly updated and staged as per dependency changes

Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
This commit is contained in:
vercel[bot]
2026-02-12 17:41:49 -06:00
committed by GitHub
co-authored by Vercel <vercel[bot]@users.noreply.github.com>
parent d03e238516
commit 14029d2450
3 changed files with 37 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/package.json
+1
View File
@@ -17,6 +17,7 @@
"@streamdown/code": "^1.0.2",
"@upstash/ratelimit": "^2.0.8",
"@upstash/redis": "^1.36.2",
"@vercel/analytics": "^1.6.1",
"@vercel/speed-insights": "^1.3.1",
"ai": "^6.0.78",
"bash-tool": "^1.3.14",
docs/pnpm-lock.yaml
Generated
+34
View File
@@ -32,6 +32,9 @@ importers:
'@upstash/redis':
specifier: ^1.36.2
version: 1.36.2
'@vercel/analytics':
specifier: ^1.6.1
version: 1.6.1(next@16.1.1(@babel/core@7.28.6)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
'@vercel/speed-insights':
specifier: ^1.3.1
version: 1.3.1(next@16.1.1(@babel/core@7.28.6)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)
@@ -1620,6 +1623,32 @@ packages:
'@upstash/redis@1.36.2':
resolution: {integrity: sha512-C0Yt8hc12vLaQYRG1fMci8iPrLtnTdbJG0HR5T8vKnvEP/1RdMMblsOJs5/jp0JXZJ1oSzMnQz4J9EVezNpI6A==}
'@vercel/analytics@1.6.1':
resolution: {integrity: sha512-oH9He/bEM+6oKlv3chWuOOcp8Y6fo6/PSro8hEkgCW3pu9/OiCXiUpRUogDh3Fs3LH2sosDrx8CxeOLBEE+afg==}
peerDependencies:
'@remix-run/react': ^2
'@sveltejs/kit': ^1 || ^2
next: '>= 13'
react: ^18 || ^19 || ^19.0.0-rc
svelte: '>= 4'
vue: ^3
vue-router: ^4
peerDependenciesMeta:
'@remix-run/react':
optional: true
'@sveltejs/kit':
optional: true
next:
optional: true
react:
optional: true
svelte:
optional: true
vue:
optional: true
vue-router:
optional: true
'@vercel/oidc@3.1.0':
resolution: {integrity: sha512-Fw28YZpRnA3cAHHDlkt7xQHiJ0fcL+NRcIqsocZQUSmbzeIKRpwttJjik5ZGanXP+vlA4SbTg+AbA3bP363l+w==}
engines: {node: '>= 20'}
@@ -5249,6 +5278,11 @@ snapshots:
dependencies:
uncrypto: 0.1.3
'@vercel/analytics@1.6.1(next@16.1.1(@babel/core@7.28.6)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
optionalDependencies:
next: 16.1.1(@babel/core@7.28.6)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3)
react: 19.2.3
'@vercel/oidc@3.1.0': {}
'@vercel/speed-insights@1.3.1(next@16.1.1(@babel/core@7.28.6)(@opentelemetry/api@1.9.0)(react-dom@19.2.3(react@19.2.3))(react@19.2.3))(react@19.2.3)':
docs/src/app/layout.tsx
+2
View File
@@ -8,6 +8,7 @@ import { Sidebar } from "@/components/sidebar";
import { DocsChat } from "@/components/docs-chat";
import { cookies } from "next/headers";
import { SpeedInsights } from "@vercel/speed-insights/next";
import { Analytics } from "@vercel/analytics/next";
const geist = Geist({
variable: "--font-geist",
@@ -64,6 +65,7 @@ export default async function RootLayout({
</MobileNavProvider>
</ThemeProvider>
<SpeedInsights />
<Analytics />
</body>
</html>
);