Next.js & Performance 5. Mai 2026 10 min Lesezeit

Next.js Image Optimization mit Claude Code: Performance 2026

Bilder sind oft der größte Performance-Killer in Web-Apps. Next.js next/image löst automatisch Lazy Loading, WebP-Konvertierung, Größenanpassung und LCP-Optimierung — Claude Code kennt alle Props und Best Practices.

next/image Grundlagen und Props

BasicsDie wichtigsten Props korrekt nutzen

# Prompt: "Optimiere alle img-Tags in meiner App mit next/image"

import Image from 'next/image';

// Statisches Bild — width/height aus Import
import heroImg from '@/public/hero.jpg';
<Image
  src={heroImg}
  alt="Hero Banner"
  priority  // LCP-Bild → kein Lazy Loading!
  placeholder="blur"  // Automatischer blur-Hash
/>

// Dynamisches Bild — sizes für responsives Verhalten
<Image
  src={user.avatarUrl}
  alt={`${user.name} Avatar`}
  width={80}
  height={80}
  sizes="80px"  // Immer 80px → Browser lädt nur 80px-Variante
  className="rounded-full"
/>

// Responsive Hero — sizes für verschiedene Breakpoints
<Image
  src={"/blog/cover.jpg"}
  alt="Blog Cover"
  fill  // Füllt Parent-Container (Parent: position:relative)
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
  style={{ objectFit: 'cover' }}
  priority
/>

// ❌ FEHLER: Kein sizes bei fill → Browser lädt immer 100vw-Variante!
// ✅ Immer sizes angeben wenn fill oder variable Breite

sizes-Tipp: "Analysiere alle next/image-Verwendungen in meiner App. Generiere korrekte sizes-Werte basierend auf dem Layout (Grid-Spalten, Container-Breite)." Claude Code liest das CSS und berechnet präzise sizes-Strings.

Remote Patterns und externe Bilder

RemoteExterne Bild-URLs sicher konfigurieren

# next.config.ts — Claude Code generiert korrekte remotePatterns
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
        // Kein pathname → alle Pfade erlaubt
      },
      {
        protocol: 'https',
        hostname: '*.supabase.co',  // Wildcard für Subdomains
        pathname: '/storage/v1/object/public/**',
      },
      {
        protocol: 'https',
        hostname: 'avatars.githubusercontent.com',
        port: '',
        pathname: '/u/**',
      },
    ],
    // Eigene Image-Loader (z.B. Cloudinary)
    loader: 'custom',
    loaderFile: './lib/cloudinary-loader.ts',
    // Erlaubte Bildgrößen für den Optimizer
    deviceSizes: [640, 750, 828, 1080, 1200, 1920],
    imageSizes: [16, 32, 48, 64, 96, 128, 256],
    formats: ['image/avif', 'image/webp'],  // AVIF zuerst
  },
};

# Cloudinary Loader:
export default function cloudinaryLoader({ src, width, quality }) {
  return `https://res.cloudinary.com/myapp/image/upload/w_${width},q_${quality ?? 75}/${src}`;
}

Performance-Optimierung: LCP und CLS

PerformanceCore Web Vitals maximieren

Technik	Auswirkung	Implementierung
priority auf LCP-Bild	LCP -30-50%	`priority` Prop
blur placeholder	CLS → 0	`placeholder="blur"`
Korrekte sizes	Bandwidth -40-70%	sizes per Breakpoint
AVIF statt WebP	Dateigröße -30%	formats: ['avif', 'webp']
fill + object-fit	Layout stabil	position:relative auf Parent

# Blur Placeholder für Remote-Images (base64 generieren):
import { getPlaiceholder } from 'plaiceholder';

async function getImageWithBlur(src: string) {
  const buffer = await fetch(src).then((r) => r.arrayBuffer());
  const { base64 } = await getPlaiceholder(Buffer.from(buffer));
  return base64;  // → blurDataURL für next/image
}

// In Server Component:
const blurDataURL = await getImageWithBlur(post.coverImage);
<Image src={post.coverImage} placeholder="blur" blurDataURL={blurDataURL} .../>

Sharp: Selbst hosten statt Vercel

# sharp lokal installieren (KEIN Vercel-Deployment nötig)
npm install sharp

# next.config.ts für selbst gehosteten Optimizer:
const nextConfig = {
  images: {
    // Standard: Vercel Image Optimization (kostenpflichtig!)
    // Mit sharp: kostenlos auf eigenem Server
    unoptimized: false,  // NICHT deaktivieren!
  },
};

# Docker — sharp braucht native Binaries:
# Dockerfile: npm ci --include=optional && npm run build
# Sharp bindet zur Build-Zeit → ARM vs x64 beachten!

# Vercel Image Optimization Limits (Stand 2026):
# Hobby: 1000 Bilder/Monat
# Pro: 5000 Bilder/Monat → danach $5 per 1000
# → Bei hohem Traffic: sharp auf eigenem Server!

Performance-Optimierung im Kurs

Im Claude Code Mastery Kurs: vollständiges Next.js Performance-Modul mit Image Optimization, Core Web Vitals, Server Components und Edge Runtime — inkl. Lighthouse-Audit-Workflow und automatischen Performance-Checks.

14 Tage kostenlos testen →