Next.js 16 — 47 Fetch Calls Uncached, Doubling Server Costs

// ============================================
// React 19 Features in Next.js 16
// ============================================

// ---- 1. Server Actions ----
// Server Actions run on the server, called directly from components

'use server'

import { redirect } from 'next/navigation'
import { revalidatePath } from 'next/cache'

export async function createOrder(formData: FormData) {
  const productId = formData.get('productId') as string
  const quantity = parseInt(formData.get('quantity') as string, 10)

  if (!productId || quantity < 1) {
    return { error: 'Invalid input' }
  }

  try {
    await fetch('https://api.internal.io/orders', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ productId, quantity }),
    })

    revalidatePath('/orders')
    redirect('/orders/confirmation')
  } catch (err) {
    return { error: 'Order creation failed' }
  }
}

// ---- 2. use() Hook ----
// Read promises and context conditionally (unlike useContext)

import { use, Suspense } from 'react'

interface Product {
  id: string
  name: string
  price: number
}

async function fetchProduct(id: string): Promise<Product> {
  const res = await fetch(
    `https://api.internal.io/products/${id}`,
    { next: { revalidate: 60 } }
  )
  if (!res.ok) throw new Error('Product not found')
  return res.json()
}

function ProductCard({ productPromise }: {
  productPromise: Promise<Product>
}) {
  // use() unwraps the promise — can be called conditionally
  const product = use(productPromise)

  return (
    <div>
      <h2>{product.name}</h2>
      <p>${product.price.toFixed(2)}</p>
    </div>
  )
}

export default function ProductPage({
  params
}: {
  params: { id: string }
}) {
  const productPromise = fetchProduct(params.id)

  return (
    <Suspense fallback={<div>Loading product...</div>}>
      <ProductCard productPromise={productPromise} />
    </Suspense>
  )
}

// ---- 3. Form Component with Server Actions ----
// React 19 Form component handles pending states automatically

import { useFormStatus } from 'react-dom'

function SubmitButton() {
  const { pending } = useFormStatus()

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Placing order...' : 'Place order'}
    </button>
  )
}

export function OrderForm({ productId }: { productId: string }) {
  return (
    <form action={createOrder}>
      <input type="hidden" name="productId" value={productId} />
      <label>
        Quantity:
        <input
          type="number"
          name="quantity"
          defaultValue={1}
          min={1}
          max={100}
        />
      </label>
      <SubmitButton />
    </form>
  )
}

// ============================================
// Partial Prerendering in Next.js 16
// ============================================

// ---- next.config.ts ----
// Enable PPR for the entire application
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    ppr: true,
  },
}

export default nextConfig

// ---- Product Page with PPR ----
// Static shell renders at build time
// Dynamic sections stream at request time
import { Suspense } from 'react'

// Static component — rendered at build time, served from edge
function ProductHeader({ name, description }: {
  name: string
  description: string
}) {
  return (
    <header>
      <h1>{name}</h1>
      <p>{description}</p>
    </header>
  )
}

// Static component — rendered at build time
function ProductImages({ images }: { images: string[] }) {
  return (
    <div className="product-images">
      {images.map((src, i) => (
        <img key={i} src={src} alt={`Product image ${i + 1}`} />
      ))}
    </div>
  )
}

// Dynamic component — rendered at request time
async function ProductPrice({ productId }: { productId: string }) {
  // This fetch runs at request time — price may change
  const res = await fetch(
    `https://api.internal.io/products/${productId}/price`,
    { cache: 'no-store' }
  )
  const { price, currency, inStock } = await res.json()

  return (
    <div className="product-price">
      <span className="price">{currency} {price.toFixed(2)}</span>
      <span className={inStock ? 'in-stock' : 'out-of-stock'}>
        {inStock ? 'In Stock' : 'Out of Stock'}
      </span>
    </div>
  )
}

// Dynamic component — rendered at request time
async function PersonalizedRecommendations({
  userId
}: {
  userId: string
}) {
  const res = await fetch(
    `https://api.internal.io/recommendations/${userId}`,
    { cache: 'no-store' }
  )
  const recommendations = await res.json()

  return (
    <div className="recommendations">
      <h3>Recommended for you</h3>
      {recommendations.map((rec: any) => (
        <div key={rec.id}>{rec.name}</div>
      ))}
    </div>
  )
}

// Dynamic component — rendered at request time
async function AddToCartForm({ productId }: { productId: string }) {
  return (
    <form action={addToCart}>
      <input type="hidden" name="productId" value={productId} />
      <button type="submit">Add to Cart</button>
    </form>
  )
}

// Page component — PPR splits static and dynamic automatically
export default async function ProductPage({
  params
}: {
  params: { id: string }
}) {
  // This fetch can be cached — product data rarely changes
  const product = await fetch(
    `https://api.internal.io/products/${params.id}`,
    { next: { revalidate: 3600 } }
  ).then(r => r.json())

  return (
    <main>
      {/* STATIC: rendered at build time */}
      <ProductHeader
        name={product.name}
        description={product.description}
      />
      <ProductImages images={product.images} />

      {/* DYNAMIC: streamed at request time */}
      <Suspense fallback={<div>Loading price...</div>}>
        <ProductPrice productId={params.id} />
      </Suspense>

      <Suspense fallback={<div>Loading cart...</div>}>
        <AddToCartForm productId={params.id} />
      </Suspense>

      <Suspense fallback={<div>Loading recommendations...</div>}>
        <PersonalizedRecommendations userId="demo-user" />
      </Suspense>
    </main>
  )
}

// ============================================
// Turbopack Configuration in Next.js 16
// ============================================

// ---- next.config.ts ----
// Turbopack is the default — no flag needed
// Webpack fallback available with --no-turbopack flag

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  // Turbopack configuration (replaces webpack config)
  turbopack: {
    // Resolve aliases (replaces webpack resolve.alias)
    resolveAlias: {
      '@components': './src/components',
      '@utils': './src/utils',
      '@hooks': './src/hooks',
    },

    // Module rules (replaces webpack module.rules)
    rules: {
      '*.svg': {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
        as: '*.js',
      },
    },
  },

  // Standard Next.js config works with Turbopack
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'cdn.example.com',
      },
    ],
  },

  // Transpile packages (works with both Turbopack and Webpack)
  transpilePackages: ['@acme/ui', '@acme/utils'],
}

export default nextConfig

// ---- Webpack to Turbopack Migration ----
// Common patterns that need migration
// BEFORE (Webpack):
// module.exports = {
//   webpack: (config, { buildId, dev, isServer }) => {
//     config.resolve.alias['@'] = path.resolve(__dirname, 'src')
//     config.module.rules.push({
//       test: /\.svg$/,
//       use: ['@svgr/webpack'],
//     })
//     return config
//   }
// }

// AFTER (Turbopack): Use turbopack config in next.config.ts
// No webpack callback — use declarative turbopack config above

// ---- Turbopack-Compatible Alternatives ----

// Webpack loader -> Turbopack equivalent
// css-loader -> Built-in (no config needed)
// file-loader -> Built-in (use ?url suffix)
// raw-loader -> Built-in (use ?raw suffix)
// @svgr/webpack -> turbopack.rules with as: '*.js'
// babel-loader -> Built-in (SWC handles transforms)
// ts-loader -> Built-in (SWC handles TypeScript)

// ---- Build Commands ----
// Development (Turbopack default):
//   npx next dev
//
// Development (Webpack fallback):
//   npx next dev --no-turbopack
//
// Production build (Turbopack default):
//   npx next build
//
// Production build (Webpack fallback):
//   npx next build --no-turbopack
//
// Debug build with Turbopack stats:
//   npx next build --debug

// ============================================
// Next.js 15+ Caching (Critical for v16 Upgrades)
// ============================================

// ---- BEFORE (Next.js 14 and earlier) ----
// fetch was cached by default
// const data = await fetch('https://api.example.com/products')
// Implicitly: { cache: 'force-cache' }

// ---- AFTER (Next.js 15 and 16) ----
// fetch uses no-store by default
// const data = await fetch('https://api.example.com/products')
// Now: { cache: 'no-store' } — hits origin every time

// ---- Explicit Caching Patterns (Required) ----

// 1. Permanent cache (force-cache)
// Use for: static data that never changes
const countries = await fetch('https://api.example.com/countries', {
  cache: 'force-cache',
})

// 2. Time-based cache (revalidate)
// Use for: data that changes periodically
const products = await fetch('https://api.example.com/products', {
  next: { revalidate: 3600 }, // Cache for 1 hour
})

// 3. Tag-based cache (revalidateTag)
// Use for: data invalidated by events
const order = await fetch(`https://api.example.com/orders/${orderId}`, {
  next: { tags: ['orders', `order-${orderId}`] },
})

import { revalidateTag } from 'next/cache'

export async function updateOrder(orderId: string, data: any) {
  await fetch(`https://api.example.com/orders/${orderId}`, {
    method: 'PUT',
    body: JSON.stringify(data),
  })
  revalidateTag(`order-${orderId}`)
  revalidateTag('orders')
}

// 4. No cache (no-store)
// Use for: real-time data that must be fresh
const stockPrice = await fetch('https://api.example.com/stock/AAPL', {
  cache: 'no-store',
})

// ---- New in Next.js 16: cacheLife API ----
// Define reusable profiles in next.config.ts:
// experimental: {
//   cacheLife: {
//     static: { stale: Infinity },
//     frequent: { stale: 60, revalidate: 10 },
//     standard: { stale: 300, revalidate: 60 },
//   }
// }

import { cacheLife } from 'next/cache'

export async function ProductList() {
  'use cache'
  cacheLife('standard')

  const products = await fetch('https://api.example.com/products')
  return products.json()
}

// ============================================
// Next.js 16 Image and Font Improvements
// ============================================

// ---- Optimized Image Component ----
import Image from 'next/image'

export function ProductGallery({ images }: { images: string[] }) {
  return (
    <div className="gallery">
      {images.map((src, index) => (
        <Image
          key={index}
          src={src}
          alt={`Product image ${index + 1}`}
          width={800}
          height={600}
          // Automatic format selection (AVIF > WebP > original)
          priority={index === 0} // First image loads eagerly
          placeholder="blur"
          blurDataURL="data:image/jpeg;base64,/9j/4AAQ..."
          sizes="(max-width: 1200px) 50vw, 33vw"
          className="rounded-lg"
        />
      ))}
    </div>
  )
}

// ---- Remote Image with Loader ----
export function RemoteProductImage({
  src,
  alt
}: {
  src: string
  alt: string
}) {
  return (
    <Image
      src={src}
      alt={alt}
      width={400}
      height={300}
      loader={({ src, width, quality }) => {
        return `https://cdn.example.com${src}?w=${width}&q=${quality || 75}`
      }}
      sizes="(max-width: 768px) 100vw, 400px"
    />
  )
}

// ---- next/font with Variable Fonts ----
import { Inter, JetBrains_Mono } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-inter',
  // Variable font with specific axes
  axes: ['slnt'],
})

const jetbrains = JetBrains_Mono({
  subsets: ['latin'],
  display: 'swap',
  variable: '--font-mono',
})

// ---- Layout with Font Variables ----
export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html
      lang="en"
      className={`${inter.variable} ${jetbrains.variable}`}
    >
      <body className={inter.className}>
        {children}
      </body>
    </html>
  )
}

// ---- Using Font Variables in CSS ----
// app/globals.css:
// :root {
//   --font-sans: var(--font-inter);
//   --font-mono: var(--font-mono);
// }
//
// body {
//   font-family: var(--font-sans);
// }
//
// code, pre {
//   font-family: var(--font-mono);
// }