import Image from "next/image";

// Hero image (above fold) - prioritize
<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={600}
  priority  // Preloads, disables lazy loading
  sizes="100vw"
/>

// Below fold - lazy load (default)
<Image
  src="/product.jpg"
  alt="Product"
  width={400}
  height={300}
  loading="lazy"  // Default behavior
  placeholder="blur"
  blurDataURL={blurPlaceholder}
/>

// next.config.js - Auto font optimization
import { Inter } from "next/font/google";

const inter = Inter({
  subsets: ["latin"],
  display: "swap",  // Prevent FOIT
  preload: true,
});

<!-- Manual preload -->
<link
  rel="preload"
  href="/fonts/inter.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

// ❌ Bad: Blocks main thread
function processLargeArray(items) {
  items.forEach(item => heavyOperation(item));
}

// ✅ Good: Yield to main thread
async function processLargeArray(items) {
  for (const item of items) {
    heavyOperation(item);
    
    // Yield every 4ms (before 50ms threshold)
    if (performance.now() % 50 < 4) {
      await yieldToMain();
    }
  }
}

function yieldToMain() {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

// heavy-worker.ts
self.onmessage = (e) => {
  const result = expensiveCalculation(e.data);
  self.postMessage(result);
};

// Component
const worker = useMemo(() => new Worker(
  new URL("./heavy-worker.ts", import.meta.url)
), []);

useEffect(() => {
  worker.onmessage = (e) => setResult(e.data);
  return () => worker.terminate();
}, [worker]);

import { useDebouncedCallback } from "use-debounce";

function SearchInput() {
  const debouncedSearch = useDebouncedCallback(
    (term) => fetchResults(term),
    300  // Wait 300ms after last keystroke
  );

  return <input onChange={(e) => debouncedSearch(e.target.value)} />;
}

// ✅ Always specify dimensions
<Image
  src="/photo.jpg"
  width={800}
  height={600}
  alt="Photo"
/>

// Or use aspect-ratio
<div style={{ aspectRatio: "16/9" }}>
  <Image src="/video-thumb.jpg" fill alt="Video" />
</div>

// ✅ Reserve space for skeleton
function ProductCard({ product }) {
  if (!product) {
    return <div className="h-64 w-full bg-gray-200 animate-pulse" />;
  }
  
  return (
    <div className="h-64 w-full">
      {/* Content */}
    </div>
  );
}

/* Isolate repaints to this element */
.card {
  contain: layout style paint;
}

/* For widgets with fixed size */
.widget {
  contain: strict;
  width: 300px;
  height: 200px;
}

import { lazy, Suspense } from "react";

// Lazy load heavy components
const HeavyChart = lazy(() => import("./HeavyChart"));

function Dashboard() {
  return (
    <Suspense fallback={<ChartSkeleton />}>
      <HeavyChart />
    </Suspense>
  );
}

import dynamic from "next/dynamic";

// Client-only component (no SSR)
const MapComponent = dynamic(
  () => import("./MapComponent"),
  { 
    ssr: false,
    loading: () => <MapSkeleton />
  }
);

// Heavy chart library
const Chart = dynamic(
  () => import("react-chartjs-2").then((mod) => mod.Chart),
  { loading: () => <ChartSkeleton /> }
);

app/
├── page.tsx           # Main bundle
├── dashboard/
│   └── page.tsx       # Separate bundle (auto-split)
└── admin/
    └── page.tsx       # Separate bundle (auto-split)

Is this a performance problem?
├── No → Don't optimize
└── Yes → 
    Is it an expensive calculation?
    ├── Yes → useMemo
    └── No →
        Is it a function passed to React.memo child?
        ├── Yes → useCallback
        └── No →
            Is the component pure and expensive to render?
            ├── Yes → React.memo
            └── No → Look elsewhere

// ✅ Good: Expensive filter/sort
const sortedItems = useMemo(
  () => items.sort((a, b) => a.name.localeCompare(b.name)),
  [items]
);

// ❌ Bad: Simple calculation
const doubled = useMemo(() => value * 2, [value]);
// Just use: const doubled = value * 2;

// ✅ Good: Passed to memoized child
const handleClick = useCallback(() => {
  doSomething(id);
}, [id]);

<MemoizedButton onClick={handleClick} />

// ❌ Bad: Not passed to memoized component
const handleClick = useCallback(() => {
  setCount(c => c + 1);
}, []); // Unnecessary overhead

// ✅ Good: Expensive pure component
const ExpensiveList = React.memo(function ExpensiveList({ items }) {
  return items.map(item => <ExpensiveItem key={item.id} item={item} />);
});

// With custom comparison
const Item = React.memo(
  function Item({ item }) { /* ... */ },
  (prevProps, nextProps) => prevProps.item.id === nextProps.item.id
);

// ❌ Creating objects inline breaks memoization
<MemoizedComponent style={{ color: "red" }} />

// ✅ Stable reference
const style = useMemo(() => ({ color: "red" }), []);
<MemoizedComponent style={style} />

// ❌ Defining components inside render
function Parent() {
  // This creates NEW component every render!
  function Child() { return <div />; }
  return <Child />;
}

// ✅ Define outside
function Child() { return <div />; }
function Parent() {
  return <Child />;
}

useEffect(() => {
  // Timer
  const timer = setInterval(tick, 1000);
  
  // Event listener
  window.addEventListener("resize", handleResize);
  
  // Subscription
  const subscription = dataSource.subscribe(handleData);
  
  // Cleanup function
  return () => {
    clearInterval(timer);
    window.removeEventListener("resize", handleResize);
    subscription.unsubscribe();
  };
}, []);

useEffect(() => {
  const controller = new AbortController();

  async function fetchData() {
    try {
      const response = await fetch(url, { signal: controller.signal });
      const data = await response.json();
      setData(data);
    } catch (error) {
      if (error.name !== "AbortError") {
        setError(error);
      }
    }
  }

  fetchData();

  return () => controller.abort();
}, [url]);

// next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

module.exports = withBundleAnalyzer({
  // config
});

ANALYZE=true npm run build

// ❌ Imports entire library (50KB+)
import { format } from "date-fns";

// ✅ Tree-shakeable import
import format from "date-fns/format";

// ❌ Full lodash (70KB+)
import { debounce } from "lodash";

// ✅ Individual import (4KB)
import debounce from "lodash/debounce";

<!-- Preconnect to critical origins -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://api.example.com" />

<!-- DNS prefetch for less critical -->
<link rel="dns-prefetch" href="https://analytics.example.com" />

<!-- Preload critical resources -->
<link rel="preload" href="/critical.css" as="style" />
<link rel="preload" href="/hero.jpg" as="image" />

<!-- Prefetch next page -->
<link rel="prefetch" href="/next-page.js" />

import Link from "next/link";

// Automatic prefetch on viewport (default)
<Link href="/products">Products</Link>

// Disable prefetch for less important links
<Link href="/terms" prefetch={false}>Terms</Link>

# CLI
npx lighthouse https://example.com --output html

# Chrome DevTools → Lighthouse tab

import { onLCP, onINP, onCLS } from "web-vitals";

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

// Send to analytics
function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);
  navigator.sendBeacon("/analytics", body);
}

onLCP(sendToAnalytics);