Next.js 15 App Router: Advanced Patterns for Enterprise Applications

// app/products/page.tsx - Server Component
import { db } from '@/lib/database';
import { ProductCard } from '@/components/ProductCard';
import { Suspense } from 'react';

// This runs only on the server
async function getProducts() {
  // Direct database access - no API needed
  const products = await db.product.findMany({
    where: { published: true },
    orderBy: { createdAt: 'desc' },
    take: 20,
    include: {
      category: true,
      reviews: {
        select: { rating: true }
      }
    }
  });
  
  return products;
}

export default async function ProductsPage() {
  const products = await getProducts();
  
  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
      {products.map(product => (
        <Suspense key={product.id} fallback={<ProductCardSkeleton />}>
          <ProductCard product={product} />
        </Suspense>
      ))}
    </div>
  );
}

// components/InteractiveProduct.tsx - Composition Pattern
import { getProductDetails } from '@/lib/products';
import { AddToCartButton } from './client/AddToCartButton';
import { ProductGallery } from './client/ProductGallery';

// Server Component - fetches data
export async function InteractiveProduct({ productId }: { productId: string }) {
  const product = await getProductDetails(productId);
  
  return (
    <div className="product-container">
      {/* Server-rendered content */}
      <div className="product-info">
        <h1>${product.name}</h1>
        <p>${product.description}</p>
        <div className="price">$${product.price}</div>
      </div>
      
      {/* Client Components for interactivity */}
      <ProductGallery images=${product.images} />
      <AddToCartButton 
        productId=${product.id} 
        price=${product.price}
        inStock=${product.inventory > 0}
      />
    </div>
  );
}

// client/AddToCartButton.tsx
'use client';

import { useState } from 'react';
import { useCart } from '@/hooks/useCart';

export function AddToCartButton({ productId, price, inStock }) {
  const [isAdding, setIsAdding] = useState(false);
  const { addItem } = useCart();
  
  const handleAddToCart = async () => {
    setIsAdding(true);
    await addItem({ productId, price });
    setIsAdding(false);
  };
  
  return (
    <button
      onClick={handleAddToCart}
      disabled={!inStock || isAdding}
      className="btn-primary"
    >
      ${isAdding ? 'Adding...' : 'Add to Cart'}
    </button>
  );
}

// app/dashboard/page.tsx - Streaming Pattern
import { Suspense } from 'react';
import { 
  UserProfile, 
  RecentActivity, 
  Analytics, 
  Notifications 
} from '@/components/dashboard';

export default function DashboardPage() {
  return (
    <div className="dashboard-grid">
      {/* Critical content loads first */}
      <Suspense fallback={<UserProfileSkeleton />}>
        <UserProfile />
      </Suspense>
      
      {/* Secondary content streams in */}
      <Suspense fallback={<ActivitySkeleton />}>
        <RecentActivity />
      </Suspense>
      
      {/* Non-critical content loads last */}
      <Suspense fallback={<AnalyticsSkeleton />}>
        <Analytics />
      </Suspense>
      
      <Suspense fallback={<NotificationsSkeleton />}>
        <Notifications />
      </Suspense>
    </div>
  );
}

// components/dashboard/Analytics.tsx
async function Analytics() {
  // This can take time - won&apos;t block other components
  const data = await fetchAnalyticsData();
  
  return (
    <div className="analytics-panel">
      {/* Render analytics charts */}
    </div>
  );
}

// app/dashboard/error.tsx
'use client';

import { useEffect } from 'react';
import { captureException } from '@sentry/nextjs';

export default function DashboardError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log to error reporting service
    captureException(error, {
      tags: {
        location: 'dashboard',
        digest: error.digest
      }
    });
  }, [error]);

  return (
    <div className="error-container">
      <h2>Something went wrong!</h2>
      <details className="error-details">
        <summary>Error details</summary>
        <pre>{error.message}</pre>
      </details>
      <button
        onClick={() => reset()}
        className="retry-button"
      >
        Try again
      </button>
    </div>
  );
}

// app/global-error.tsx
'use client';

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  return (
    <html>
      <body>
        <div className="global-error">
          <h1>Application Error</h1>
          <p>The application encountered an unexpected error.</p>
          <button onClick={() => reset()}>
            Reload Application
          </button>
        </div>
      </body>
    </html>
  );
}

// middleware.ts - Error tracking
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const response = NextResponse.next();
  
  // Add error tracking headers
  response.headers.set('X-Request-Id', crypto.randomUUID());
  
  return response;
}

// Both routers can coexist
├── pages/           // Existing Pages Router
│   ├── old-page.tsx
│   └── api/
└── app/            // New App Router
    ├── new-routes/
    └── layout.tsx

// Before: pages/products/[id].tsx
export async function getStaticProps({ params }) {
  const product = await getProduct(params.id);
  return { props: { product } };
}

export default function ProductPage({ product }) {
  return <ProductDetails product={product} />;
}

// After: app/products/[id]/page.tsx
export default async function ProductPage({ 
  params 
}: { 
  params: { id: string } 
}) {
  const product = await getProduct(params.id);
  return <ProductDetails product={product} />;
}

// Before: pages/api/products.ts
export default async function handler(req, res) {
  if (req.method === 'GET') {
    const products = await getProducts();
    res.status(200).json(products);
  }
}

// After: app/api/products/route.ts
import { NextResponse } from 'next/server';

export async function GET() {
  const products = await getProducts();
  return NextResponse.json(products);
}

export async function POST(request: Request) {
  const data = await request.json();
  const product = await createProduct(data);
  return NextResponse.json(product, { status: 201 });
}