sakilanwar12/nextjs-typescript-skills

Next.js Leistung

Regeln

1. Bilder: Immer next/image mit expliziten sizes, priority nur für LCP-Heldenbilder. Schriftarten: next/font (kein render-blockierendes Google <link>).
2. Zuerst messen: @next/bundle-analyzer, next build-Ausgabe, Lighthouse. Zuerst den größten Brocken beheben.
3. dynamic(() => import(...), { ssr: false }) für schwere Client-Only-Widgets (Diagramme, Editoren). Anfangs-JS unter 200 kB gz halten, wo möglich.
4. Aggressiv cachen: statisch + revalidate (ISR) für semi-dynamische Seiten; loading.tsx/Suspense verwenden, um langsame Teile zu streamen, anstatt die TTFB zu blockieren.
5. Wasserfälle vermeiden: in RSC parallelisieren, wiederholte fetch-Aufrufe memoizieren (pro Request automatisch dedupliziert), unstable_cache für teure Berechnungen verwenden.

Patterns

// next/image — skaliert, standardmäßig lazy
import Image from 'next/image';
<Image src="/hero.jpg" alt="Dashboard" width={1200} height={630} priority sizes="100vw" />
<Image src="/avatar.png" alt="User" width={64} height={64} sizes="64px" />

// next/font — selbst gehostet, kein CLS
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en" className={inter.className}><body>{children}</body></html>;
}

// Schweres Client-Widget — Code-Splitting
import dynamic from 'next/dynamic';
const Chart = dynamic(() => import('@/components/chart'), { ssr: false, loading: () => <p>Diagramm wird geladen…</p> });

// ISR
export const revalidate = 60;

// next.config.js — Analyzer
const withBundleAnalyzer = require('@next/bundle-analyzer')({ enabled: process.env.ANALYZE === 'true' });
module.exports = withBundleAnalyzer({});
// ANALYZE=true next build

Checkliste

• Heldenbild priority + sizes, andere lazy?
• next/font verwendet, keine externen Schriftarten-Links?
• Schwere Komponenten dynamisch importiert?
• Bundle analysiert, größter Import gerechtfertigt?
• ISR/revalidate für cachebare Seiten gesetzt?
• LCP/CLS/INP in Lighthouse überprüft?