204f3a1249
Implemented Vercel Web Analytics for Next.js
Summary:
Successfully installed and configured Vercel Web Analytics in this Next.js App Router project.
Changes Made:
1. Installed @vercel/analytics package:
- Added @vercel/analytics@^1.6.1 to package.json dependencies
- Updated package-lock.json with new dependency tree
2. Modified app/layout.tsx:
- Added import statement: import { Analytics } from '@vercel/analytics/next'
- Added <Analytics /> component inside the <body> tag, after <SpeedInsights />
- Maintained existing code structure and formatting
3. Verification:
- Build completed successfully with no errors (npm run build)
- No linting errors (no lint script configured in project)
- No test failures (no test script configured in project)
- All changes follow Next.js App Router best practices
Implementation Details:
- The Analytics component is placed at the end of the body tag, following the existing pattern used for SpeedInsights
- The component will automatically track page views and Web Vitals data
- Works seamlessly with the existing SpeedInsights integration
- No environment variables or additional configuration required
Files Modified:
- app/layout.tsx (added Analytics import and component)
- package.json (added @vercel/analytics dependency)
- package-lock.json (updated with new dependency tree)
Co-authored-by: Vercel <vercel[bot]@users.noreply.github.com>
42 lines
1.1 KiB
TypeScript
42 lines
1.1 KiB
TypeScript
import type { Metadata } from "next";
|
|
import "./globals.css";
|
|
import Navbar from "./components/Navbar";
|
|
import NavItem from "./components/NavItem";
|
|
import Header from "./components/Header";
|
|
import Image from "next/image";
|
|
import logo from "./logo.png"
|
|
import Link from "next/link";
|
|
import { SpeedInsights } from '@vercel/speed-insights/next';
|
|
import { Analytics } from '@vercel/analytics/next';
|
|
|
|
export const metadata: Metadata = {
|
|
title: "Portfolio - Mike Karl",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: Readonly<{
|
|
children: React.ReactNode;
|
|
}>) {
|
|
return (
|
|
<html lang="de">
|
|
<body>
|
|
<Header>
|
|
<Navbar>
|
|
<NavItem href="/">Home</NavItem>
|
|
<NavItem href="/projects">Projekte</NavItem>
|
|
<NavItem href="/about">About</NavItem>
|
|
<NavItem href="/contact">Kontakt</NavItem>
|
|
</Navbar>
|
|
<Link href={"/"}>
|
|
<Image alt="logo.png" className="mx-4" src={logo} width={70} height={70} />
|
|
</Link>
|
|
</Header>
|
|
{children}
|
|
<div className="bg" />
|
|
<SpeedInsights />
|
|
<Analytics />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|