portfolio/app/layout.tsx

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>
  );
}
Initial commit from Create Next App 2025-10-17 20:22:21 +02:00			`import type { Metadata } from "next";`
			`import "./globals.css";`
layout 2026-02-08 19:40:39 +01:00			`import Navbar from "./components/Navbar";`
			`import NavItem from "./components/NavItem";`
			`import Header from "./components/Header";`
logo & favicon 2026-02-08 21:22:34 +01:00			`import Image from "next/image";`
			`import logo from "./logo.png"`
refactor(NavItem): enhance link highlighting and update layout structure 2026-02-08 22:20:47 +01:00			`import Link from "next/link";`
Install Vercel Speed Insights for Next.js ## 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> 2026-02-13 09:12:29 +00:00			`import { SpeedInsights } from '@vercel/speed-insights/next';`
Initial commit from Create Next App 2025-10-17 20:22:21 +02:00
			`export const metadata: Metadata = {`
Take 2: background 2026-02-07 13:42:12 +01:00			`title: "Portfolio - Mike Karl",`
Initial commit from Create Next App 2025-10-17 20:22:21 +02:00			`};`

			`export default function RootLayout({`
			`children,`
			`}: Readonly<{`
			`children: React.ReactNode;`
			`}>) {`
			`return (`
Take 2: background 2026-02-07 13:42:12 +01:00			`<html lang="de">`
WIP 2026-02-07 23:02:18 +01:00			`<body>`
layout 2026-02-08 19:40:39 +01:00			`<Header>`
			`<Navbar>`
refactor(NavItem): enhance link highlighting and update layout structure 2026-02-08 22:20:47 +01:00			`<NavItem href="/">Home</NavItem>`
layout 2026-02-08 19:40:39 +01:00			`<NavItem href="/projects">Projekte</NavItem>`
refactor(NavItem): enhance link highlighting and update layout structure 2026-02-08 22:20:47 +01:00			`<NavItem href="/about">About</NavItem>`
layout 2026-02-08 19:40:39 +01:00			`<NavItem href="/contact">Kontakt</NavItem>`
			`</Navbar>`
refactor(NavItem): enhance link highlighting and update layout structure 2026-02-08 22:20:47 +01:00			`<Link href={"/"}>`
			`<Image alt="logo.png" className="mx-4" src={logo} width={70} height={70} />`
			`</Link>`
layout 2026-02-08 19:40:39 +01:00			`</Header>`
feat(Home): implement job rotation animation using framer-motion 2026-02-08 22:55:26 +01:00			`<main className="pt-20">`
			`{children}`
			`</main>`
layout 2026-02-08 19:40:39 +01:00			`<div className="bg" />`
Install Vercel Speed Insights for Next.js ## 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> 2026-02-13 09:12:29 +00:00			`<SpeedInsights />`
Initial commit from Create Next App 2025-10-17 20:22:21 +02:00			`</body>`
			`</html>`
			`);`
			`}`