import type { NextConfig } from 'next';
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

const nextConfig: NextConfig = {
  // your config here
};

export default withBundleAnalyzer(nextConfig);

import dynamic from 'next/dynamic';

// 1. Basic dynamic import — loads when component mounts
const HeavyChart = dynamic(() => import('@/components/HeavyChart'));

// 2. With loading fallback — shows skeleton while loading
const DataTable = dynamic(() => import('@/components/DataTable'), {
  loading: () => (
    <div className="animate-pulse bg-gray-200 h-64 rounded-lg" />
  ),
});

// 3. Disable SSR — render only on client
// Useful for: window-dependent code, browser-only libraries (e.g., charts)
const MapComponent = dynamic(() => import('@/components/Map'), {
  ssr: false,
  loading: () => <p>Loading map...</p>,
});

// 4. Named export — for components not exported as default
const Modal = dynamic(() =>
  import('@/components/ui/Modal').then((mod) => mod.Modal)
);

export default function DashboardPage() {
  return (
    <div>
      <h1>Dashboard</h1>
      {/* HeavyChart only loads when this page is visited */}
      <HeavyChart />
      {/* DataTable shows a skeleton while loading */}
      <DataTable />
      {/* MapComponent never renders on the server */}
      <MapComponent center={[40.7128, -74.006]} zoom={12} />
    </div>
  );
}

import Image from 'next/image';
import Script from 'next/script';

export default function BlogPage() {
  return (
    <article>
      {/* Hero image: eager (loads immediately, above fold) */}
      <Image
        src="/hero.webp"
        alt="Blog hero"
        width={1200}
        height={630}
        priority // <-- marks as eager / LCP image
      />

      {/* Body images: lazy (loads when scrolled into view) */}
      <Image
        src="/diagram.webp"
        alt="Architecture diagram"
        width={800}
        height={450}
        loading="lazy" // default behavior for non-priority images
      />

      {/* Third-party script: defer until page is interactive */}
      <Script
        src="https://analytics.example.com/script.js"
        strategy="afterInteractive" // or 'lazyOnload' for lowest priority
      />
    </article>
  );
}

// 1. Default: cached indefinitely (like getStaticProps)
const data = await fetch('https://api.example.com/products');

// 2. No cache: always fresh (like getServerSideProps)
const freshData = await fetch('https://api.example.com/products', {
  cache: 'no-store',
});

// 3. Revalidate after N seconds (ISR equivalent)
const revalidatedData = await fetch('https://api.example.com/products', {
  next: { revalidate: 3600 }, // re-fetch after 1 hour
});

// 4. Tag-based revalidation — invalidate by tag
const taggedData = await fetch('https://api.example.com/products', {
  next: { tags: ['products'] },
});

// Then in a Server Action:
import { revalidateTag, revalidatePath } from 'next/cache';

async function updateProduct() {
  'use server';
  // ... update logic
  revalidateTag('products');       // invalidate all fetches tagged 'products'
  revalidatePath('/products');     // or invalidate a specific path
}

'use client';

import { useMemo, useState } from 'react';

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
  inStock: boolean;
}

interface ProductListProps {
  products: Product[];
}

export default function ProductList({ products }: ProductListProps) {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');
  const [sortBy, setSortBy] = useState<'price' | 'name'>('name');

  // ❌ Without useMemo: runs on EVERY render (including unrelated state changes)
  // const filteredProducts = products
  //   .filter(p => p.name.toLowerCase().includes(searchTerm.toLowerCase()))
  //   ...

  // ✅ With useMemo: only recalculates when dependencies change
  const filteredProducts = useMemo(() => {
    return products
      .filter((p) => {
        const matchesSearch = p.name
          .toLowerCase()
          .includes(searchTerm.toLowerCase());
        const matchesCategory =
          selectedCategory === 'all' || p.category === selectedCategory;
        return matchesSearch && matchesCategory;
      })
      .sort((a, b) => {
        if (sortBy === 'price') return a.price - b.price;
        return a.name.localeCompare(b.name);
      });
  }, [products, searchTerm, selectedCategory, sortBy]);
  // ↑ Only re-runs when these values change

  // Memoize expensive stats calculation
  const stats = useMemo(() => ({
    total: filteredProducts.length,
    avgPrice:
      filteredProducts.reduce((sum, p) => sum + p.price, 0) /
      (filteredProducts.length || 1),
    inStockCount: filteredProducts.filter((p) => p.inStock).length,
  }), [filteredProducts]);

  return (
    <div>
      <input
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search products..."
      />
      <p>
        {stats.total} products | Avg: ${stats.avgPrice.toFixed(2)} |{' '}
        {stats.inStockCount} in stock
      </p>
      {filteredProducts.map((p) => (
        <div key={p.id}>{p.name} — ${p.price}</div>
      ))}
    </div>
  );
}

'use client';

import { useCallback, useState, memo } from 'react';

// Wrap child in memo so it only re-renders when its props change
const FilterButton = memo(function FilterButton({
  label,
  onClick,
  active,
}: {
  label: string;
  onClick: () => void;
  active: boolean;
}) {
  console.log(`FilterButton "${label}" rendered`); // only logs when props change
  return (
    <button
      onClick={onClick}
      className={active ? 'bg-blue-500 text-white' : 'bg-gray-200'}
    >
      {label}
    </button>
  );
});

export default function SearchableList() {
  const [filter, setFilter] = useState('all');
  const [count, setCount] = useState(0); // unrelated state

  // ❌ Without useCallback: new function created every render
  // even when count changes, FilterButton re-renders unnecessarily
  // const handleAll = () => setFilter('all');

  // ✅ With useCallback: same function reference until dependencies change
  const handleAll = useCallback(() => setFilter('all'), []);
  const handleActive = useCallback(() => setFilter('active'), []);
  const handleInactive = useCallback(() => setFilter('inactive'), []);

  return (
    <div>
      {/* These buttons won't re-render when count changes */}
      <FilterButton label="All" onClick={handleAll} active={filter === 'all'} />
      <FilterButton label="Active" onClick={handleActive} active={filter === 'active'} />
      <FilterButton label="Inactive" onClick={handleInactive} active={filter === 'inactive'} />

      {/* This triggers re-render of parent but NOT FilterButtons */}
      <button onClick={() => setCount((c) => c + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
}

import Image from 'next/image';

interface Props {
  product: {
    name: string;
    heroImage: string;
    thumbnailImage: string;
  };
}

export default function ProductPage({ product }: Props) {
  return (
    <article>
      {/* Hero image — above the fold, load immediately */}
      <Image
        src={product.heroImage}
        alt={`${product.name} hero`}
        width={1200}
        height={630}
        priority         // preload: this is the LCP element
        quality={90}     // 90% quality (default: 75)
        sizes="100vw"    // hint: takes full viewport width
      />

      {/* Gallery image — below fold, lazy load */}
      <Image
        src={product.thumbnailImage}
        alt={`${product.name} thumbnail`}
        width={400}
        height={400}
        loading="lazy"   // explicit (this is the default for non-priority)
        placeholder="blur"               // show blurred preview
        blurDataURL="data:image/jpeg;base64,/9j..." // tiny base64 preview
        sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 400px"
        // ↑ tells browser what size image to request at each breakpoint
      />

      {/* Remote image from external domain */}
      {/* Requires: next.config.ts → images.remotePatterns */}
      <Image
        src="https://cdn.example.com/photo.jpg"
        alt="External photo"
        fill              // fills parent container (parent must be relative)
        style={{ objectFit: 'cover' }}
      />
    </article>
  );
}

import { Inter, Playfair_Display, JetBrains_Mono } from 'next/font/google';
import localFont from 'next/font/local';

// Google Fonts — downloaded at build time, self-hosted
const inter = Inter({
  subsets: ['latin'],
  display: 'swap',    // show fallback until custom font loads (prevents FOIT)
  variable: '--font-inter', // expose as CSS variable
  preload: true,      // preload this font (default: true)
});

// Display/heading font
const playfair = Playfair_Display({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-playfair',
  weight: ['400', '700'], // only load needed weights (reduces file size)
});

// Monospace for code blocks
const jetbrainsMono = JetBrains_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-mono',
  weight: ['400', '500'],
});

// Local font (e.g., brand/custom font)
const brandFont = localFont({
  src: [
    { path: '../public/fonts/brand-regular.woff2', weight: '400' },
    { path: '../public/fonts/brand-bold.woff2', weight: '700' },
  ],
  display: 'swap',
  variable: '--font-brand',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html
      lang="en"
      // Apply font class names to html element
      className={`${inter.variable} ${playfair.variable} ${jetbrainsMono.variable} ${brandFont.variable}`}
    >
      <body className={inter.className}>
        {children}
      </body>
    </html>
  );
}

'use client';

import { memo } from 'react';

interface ItemProps {
  id: number;
  name: string;
  price: number;
  onBuy: (id: number) => void; // ← must be stable (useCallback)
}

// React.memo: only re-renders if props actually changed
const ProductItem = memo(function ProductItem({ id, name, price, onBuy }: ItemProps) {
  console.log(`ProductItem ${id} rendered`);
  return (
    <div className="product-card">
      <h3>{name}</h3>
      <p>${price}</p>
      <button onClick={() => onBuy(id)}>Buy Now</button>
    </div>
  );
});

// Parent component
export default function ProductGrid({ products }: { products: ItemProps[] }) {
  const [cart, setCart] = useState<number[]>([]);

  // ✅ Stable function reference — ProductItem won't re-render when cart changes
  const handleBuy = useCallback((id: number) => {
    setCart((prev) => [...prev, id]);
  }, []); // no dependencies = created once

  return (
    <div className="grid">
      {products.map((product) => (
        <ProductItem
          key={product.id}
          {...product}
          onBuy={handleBuy}
        />
      ))}
    </div>
  );
}

// ❌ Bad: Sequential API calls (waterfall)
// Each request waits for the previous one to complete
async function getBadData() {
  const user = await fetch('/api/user');           // waits...
  const posts = await fetch('/api/posts');          // waits after user...
  const analytics = await fetch('/api/analytics'); // waits after posts...
}
// Total time: 300ms + 200ms + 400ms = 900ms

// ✅ Good: Parallel API calls using Promise.all
async function getParallelData() {
  const [user, posts, analytics] = await Promise.all([
    fetch('/api/user').then((r) => r.json()),
    fetch('/api/posts').then((r) => r.json()),
    fetch('/api/analytics').then((r) => r.json()),
  ]);
  // Total time: max(300ms, 200ms, 400ms) = 400ms
  return { user, posts, analytics };
}

// ✅ Even better: React cache() for Server Components
// Deduplicates identical requests across the render tree
import { cache } from 'react';

// Wrap your fetch in cache() so calling it multiple times
// in one render only fetches ONCE
const getUser = cache(async (id: string) => {
  const res = await fetch(`https://api.example.com/users/${id}`);
  return res.json();
});

// Now both these components can call getUser(id) but only ONE fetch occurs
// app/layout.tsx — calls getUser(id) for header
// app/profile/page.tsx — also calls getUser(id) for page content

import { Suspense } from 'react';
import DashboardShell from '@/components/DashboardShell';
import RecentPosts from '@/components/RecentPosts';
import AnalyticsWidget from '@/components/AnalyticsWidget';
import RevenueChart from '@/components/RevenueChart';

// Each of these components fetches its own data
// They render independently — no waterfall!

export default function DashboardPage() {
  return (
    <DashboardShell> {/* Static shell renders immediately */}
      <div className="grid grid-cols-3 gap-4">

        {/* Fast data — shows quickly */}
        <Suspense fallback={<div className="skeleton h-32" />}>
          <RecentPosts /> {/* fetches /api/posts */}
        </Suspense>

        {/* Medium data — streams in when ready */}
        <Suspense fallback={<div className="skeleton h-64" />}>
          <AnalyticsWidget /> {/* fetches /api/analytics */}
        </Suspense>

        {/* Slow data — streams in last */}
        <Suspense fallback={<div className="skeleton h-64" />}>
          <RevenueChart /> {/* fetches /api/revenue — slowest */}
        </Suspense>

      </div>
    </DashboardShell>
  );
}

import dynamic from 'next/dynamic';
import { Suspense } from 'react';
import { cache } from 'react';

// Heavy chart library — only loads client-side, shows loading state
const AnalyticsChart = dynamic(() => import('@/components/AnalyticsChart'), {
  ssr: false,
  loading: () => <div className="h-64 bg-slate-100 animate-pulse rounded-lg" />,
});

// Cached data fetcher — called multiple times but fetches once
const getDashboardData = cache(async () => {
  const [metrics, recentOrders, topProducts] = await Promise.all([
    fetch('/api/metrics').then(r => r.json()),
    fetch('/api/orders?limit=5').then(r => r.json()),
    fetch('/api/products?sort=revenue&limit=5').then(r => r.json()),
  ]);
  return { metrics, recentOrders, topProducts };
});

export default async function AdminDashboard() {
  const { metrics, recentOrders, topProducts } = await getDashboardData();

  return (
    <div>
      {/* Static metrics render instantly */}
      <MetricCards metrics={metrics} />

      {/* Chart loads lazily client-side */}
      <AnalyticsChart />

      {/* Tables stream in progressively */}
      <div className="grid grid-cols-2 gap-6">
        <Suspense fallback={<TableSkeleton />}>
          <RecentOrdersTable orders={recentOrders} />
        </Suspense>
        <Suspense fallback={<TableSkeleton />}>
          <TopProductsTable products={topProducts} />
        </Suspense>
      </div>
    </div>
  );
}

import Image from 'next/image';
import dynamic from 'next/dynamic';
import { notFound } from 'next/navigation';

// Comment section: only loads when user scrolls to it
const CommentSection = dynamic(() => import('@/components/CommentSection'), {
  ssr: false,
  loading: () => <p className="text-gray-400">Loading comments...</p>,
});

// Share widget: loads after page is interactive
const ShareWidget = dynamic(() => import('@/components/ShareWidget'), {
  ssr: false,
});

export default async function BlogPost({ params }: { params: { slug: string } }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return (
    <article>
      {/* Hero image with priority (LCP element) */}
      <Image
        src={post.coverImage}
        alt={post.title}
        width={1200}
        height={630}
        priority
        sizes="100vw"
      />

      <h1>{post.title}</h1>

      {/* Body images without priority (lazy) */}
      <div dangerouslySetInnerHTML={{ __html: post.htmlContent }} />

      {/* Non-critical components load lazily */}
      <ShareWidget url={`/blog/${params.slug}`} />
      <CommentSection postId={post.id} />
    </article>
  );
}

// Generate static pages at build time for all blog posts
export async function generateStaticParams() {
  const posts = await getAllPostSlugs();
  return posts.map((slug) => ({ slug }));
}

import dynamic from 'next/dynamic';
import Image from 'next/image';
import { Suspense } from 'react';

// Heavy components loaded lazily
const ProductReviews = dynamic(() => import('@/components/ProductReviews'));
const SizeGuide = dynamic(() => import('@/components/SizeGuide'), { ssr: false });
const RelatedProducts = dynamic(() => import('@/components/RelatedProducts'));

export default async function ProductPage({ params }: { params: { id: string } }) {
  // Fetch critical data in parallel
  const [product, inventory] = await Promise.all([
    getProduct(params.id),
    getInventory(params.id),
  ]);

  return (
    <div>
      <div className="grid grid-cols-2 gap-8">
        {/* Product images — first one is priority */}
        <div>
          {product.images.map((img, i) => (
            <Image
              key={img.url}
              src={img.url}
              alt={`${product.name} - view ${i + 1}`}
              width={600}
              height={600}
              priority={i === 0} // only first image is priority
              sizes="(max-width: 768px) 100vw, 50vw"
            />
          ))}
        </div>

        {/* Product info — static, renders instantly */}
        <div>
          <h1>{product.name}</h1>
          <p>${product.price}</p>
          <StockBadge inventory={inventory} />
          <AddToCartButton productId={product.id} />
          <SizeGuide /> {/* modal, ssr=false */}
        </div>
      </div>

      {/* Non-critical sections stream in */}
      <Suspense fallback={<ReviewsSkeleton />}>
        <ProductReviews productId={product.id} />
      </Suspense>

      <Suspense fallback={<ProductGridSkeleton />}>
        <RelatedProducts categoryId={product.categoryId} excludeId={product.id} />
      </Suspense>
    </div>
  );
}