Web Framework Deep Dive

Next.js

The React meta-framework. File-based routing, server components, image optimization, and a tight feedback loop with Vercel — Next.js is the production answer to "I want to build a React app."

ReactFull-stackSSR / SSG / RSCApp RouterVercel
← Back to Client Side
Quick Facts

At a Glance

Built on
React
Created
2016 · Vercel (Zeit)
Routing
App Router (RSC) + Pages Router (legacy)
Render modes
SSR, SSG, ISR, RSC, streaming
Latest
Next.js 15
Notable users
Notion, TikTok, Hulu, Twitch, OpenAI

Basic Concepts

  • File-based routing: a file at app/products/page.tsx becomes the route /products.
  • Server Components render on the server with zero client JS by default.
  • Client Components are opt-in via "use client" — for interactivity.
  • Server Actions let forms call server functions without an API endpoint.
  • Route Handlers (route.ts) replace API routes — REST, webhooks, edge functions.
Syntax

Taste of Next.js (App Router)

// app/products/page.tsx — server component, runs on the server
async function getProducts() {
  const res = await fetch("https://api.example.com/products", {
    next: { revalidate: 60 },  // ISR: cache for 60s
  });
  return res.json();
}

export default async function ProductsPage() {
  const products = await getProducts();

  return (
    <ul>
      {products.map(p => (
        <li key={p.id}>{p.name} — ${p.price}</li>
      ))}
    </ul>
  );
}
Mechanics

Key Features

App Router & React Server Components

The App Router (default since v13) is built on RSC. Each route can mix server-rendered and client-interactive components in one tree. Layouts, loading.tsx, error.tsx, and not-found.tsx are special files for nested UI.

Rendering Modes
  • SSG — pre-render at build time.
  • SSR — render per request on the server.
  • ISR — pre-render, then re-build on a schedule.
  • RSC streaming — flush UI as data resolves.
  • Edge runtime — run components close to the user (Vercel Edge, Cloudflare).
Server Actions & Forms

Mark a function with "use server" and call it directly from a form or client component. Next handles the network round-trip, optimistic updates, and validation. No REST endpoints to wire up.

Built-in Optimizations
  • next/image — automatic optimization, lazy loading, responsive sizes.
  • next/font — self-host Google Fonts; zero CLS.
  • next/script — strategic third-party script loading.
  • Turbopack — Vite-class dev server (Rust-built).
Deployment

Vercel is the easiest target (built by the same team), but Next.js runs on Node, Docker, AWS, Cloudflare Pages, Netlify, and self-hosted setups. next build && next start is enough for a Node host.

Trade-offs

Strengths & Weaknesses

Strengths
  • Most production-ready React stack — routing, data, deploy, all included.
  • RSC + Server Actions reduce the amount of JS shipped.
  • Massive community & commercial backing.
  • Fastest path from idea to deployed app.
Weaknesses
  • Significant magic — RSC + caching can be hard to reason about.
  • App Router still maturing; breaking changes between majors.
  • Best DX is on Vercel (some features harder to self-host).
  • Build complexity vs a plain Vite + React SPA.
Where It Shines

Sweet Spots

Marketing & Content Sites

SSG + ISR for blogs, docs, landing pages — fast and SEO-friendly.

SaaS Dashboards

Server components for data, client components for interactivity.

E-commerce

ISR product pages, Server Actions for cart, edge for global latency.

AI Apps

Streaming UI for LLM responses; Vercel AI SDK integrates tightly.

Continue

Other Web Frameworks

ReactAngularVueSvelteSolidNuxtSvelteKit ↑ Back to Client Side