74ebc52437
## Vercel Speed Insights Implementation Successfully installed and configured Vercel Speed Insights for this Next.js portfolio project. ### What was implemented: 1. **Installed @vercel/speed-insights package** - Used npm (the project's package manager) to install `@vercel/speed-insights` v1.3.1 - Updated package.json and package-lock.json with the new dependency 2. **Added SpeedInsights component to root layout** - Modified `app/layout.tsx` to import SpeedInsights from '@vercel/speed-insights/next' - Added the `<SpeedInsights />` component inside the `<body>` tag, after the main content - Placement follows Next.js App Router best practices for Next.js 15.5.12 ### Files Modified: - `app/layout.tsx` - Added import and component - `package.json` - Added @vercel/speed-insights dependency - `package-lock.json` - Updated with new dependency tree ### Implementation Details: - The project uses Next.js 15.5.12 with App Router, which is newer than 13.5+ - Used the simplified approach: imported from '@vercel/speed-insights/next' - No 'use client' directive needed as the package handles this internally - The component is placed at the end of the body tag for optimal performance ### Verification: - Build completed successfully with `npm run build` - No errors or warnings introduced - All changes have been staged with git The Speed Insights component will now automatically track Core Web Vitals and send analytics data to Vercel when deployed. 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';
|
|
|
|
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>
|
|
<main className="pt-20">
|
|
{children}
|
|
</main>
|
|
<div className="bg" />
|
|
<SpeedInsights />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|