Skip to content

Commit 6c7edb3

Browse files
authored
Add Vercel Web Analytics integration (#2)
# Vercel Web Analytics Integration Successfully installed and configured Vercel Web Analytics for the render-modes Next.js project. ## Implementation Summary ### 1. Documentation - Fetched the latest installation instructions from the official Vercel documentation (https://vercel.com/docs/analytics/quickstart) - Confirmed this is a Next.js App Router project, which requires the `@vercel/analytics/next` import ### 2. Package Installation - Installed `@vercel/analytics` package version ^2.0.1 using npm - Updated package.json to include the new dependency - Updated package-lock.json with the new dependency tree ### 3. Code Changes **Modified: app/layout.tsx** - Added import: `import { Analytics } from "@vercel/analytics/next";` - Added `<Analytics />` component to the root layout before the closing `</body>` tag - Preserved all existing code structure, fonts, metadata, and components ### 4. Verification All quality checks passed successfully: - ✅ TypeScript type checking (`npm run typecheck`) - ✅ ESLint linting (`npm run lint`) - ✅ Production build (`npm run build`) - ✅ Prettier formatting (`npm run format:check`) ## Files Changed - **app/layout.tsx** - Added Analytics import and component - **package.json** - Added @vercel/analytics dependency - **package-lock.json** - Updated with new dependency tree ## Next Steps Once deployed to Vercel with Analytics enabled in the dashboard: 1. The Analytics component will automatically track page views 2. Verify by checking browser Network tab for requests to `/<unique-path>/view` 3. View analytics data in the Vercel dashboard under the Analytics section ## Implementation Notes - The Analytics component was placed at the end of the body tag as recommended by Vercel documentation - The implementation follows Next.js App Router best practices - No breaking changes were introduced - all existing functionality remains intact - The component is lightweight and won't impact page load performance Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
1 parent 2343f93 commit 6c7edb3

3 files changed

Lines changed: 47 additions & 0 deletions

File tree

app/layout.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Metadata } from "next";
22
import { Geist, Geist_Mono } from "next/font/google";
3+
import { Analytics } from "@vercel/analytics/next";
34
import { Nav } from "@/app/_components/Nav";
45
import { Footer } from "@/app/_components/Footer";
56
import "./globals.css";
@@ -34,6 +35,7 @@ export default function RootLayout({
3435
<Nav />
3536
<main className="flex-1">{children}</main>
3637
<Footer />
38+
<Analytics />
3739
</body>
3840
</html>
3941
);

package-lock.json

Lines changed: 44 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
]
2727
},
2828
"dependencies": {
29+
"@vercel/analytics": "^2.0.1",
2930
"next": "16.2.4",
3031
"react": "19.2.4",
3132
"react-dom": "19.2.4"

0 commit comments

Comments
 (0)