Next.js
A full-stack React framework with file-based routing, SSR, SSG, API routes, and image/font optimization. The most popular way to build React apps. Made by Vercel. The App Router (Next 13+) uses React Server Components. Handles routing, rendering, and deployment.
- Production React apps.
- SEO-critical sites (SSR/SSG).
- Full-stack apps with API routes.
- Simple static sites (Astro is lighter).
- Apps needing a different backend (use React + separate API).
Definition
Next.js is a React meta-framework. The App Router maps files to routes. Pages can be server-rendered (SSR), statically generated (SSG), or streamed (RSC). API routes handle backend logic. Built-in image optimization, font optimization, and code splitting. Deploys to Vercel with edge functions.
Why it exists
Plain React is a client-only library. Next.js adds routing, SSR/SSG for SEO and performance, API routes for backend, and optimization — a complete framework so you don't assemble 10 libraries.
How it works
File-based routing: app/page.tsx is the home page, app/terms/[slug]/page.tsx is dynamic. Server Components render on the server (no JS shipped). Client Components ('use client') ship to the browser. generateStaticParams pre-renders pages. next build outputs static + serverless.
Scaling limits
App Router and RSC have a learning curve. Build complexity. Vendor lock-in to Vercel features (mitigated by self-hosting). Large apps have many routes to manage.
Cost shape
Free and open source. Vercel hosting has free + paid tiers.
Alternatives
- Remix — Web-standards-focused, similar SSR.
- Astro — Static-first, less JS, great for content sites.
Failure modes
- RSC/client component confusion.
- Build configuration complexity.
- Vercel-specific features not portable.