What is Next.js?

Vercel released Next.js in 2016 to answer a question React itself politely refuses: where should rendering happen, and when? React, released by Facebook in 2013, is a library for describing UI as a tree of components. It does not have an opinion about routing, data fetching, server-side rendering, code splitting, image optimization, or how the first byte of HTML reaches the browser. Those are left to you. For a single dashboard inside an existing app, that's freedom. For building a whole product from scratch, it's a stack of decisions you don't want to make on a Tuesday.

Next.js makes those decisions. You drop a file at app/about/page.tsx and /about is now a route — no router config, the filesystem is the routing table. You write a component, and by default Next.js renders it on the server, sends the resulting HTML on the first response, then "hydrates" it in the browser so React can take over for interactivity. The page is visible before any JavaScript runs. Search engines see real markup. The user on a slow phone sees text instead of a spinner. This was hard to do well in plain React; in Next.js it's the default.

The newer twist, shipped in Next.js 13 in October 2022 and made stable in Next.js 14, is React Server Components. A server component is a React component that runs only on the server, never in the browser bundle. It can await fetch() directly inside the component body, talk to a database, read environment secrets — and none of that code crosses the network. The browser receives the rendered output and a stripped-down JS bundle that contains only the genuinely interactive bits (marked with "use client"). For a content-heavy site, this can cut JavaScript shipped to the browser by an order of magnitude. The mental model: server components for fetching and structure, client components for state and event handlers.

The rest of Next.js is the long tail of things every production web app needs and nobody wants to build twice. next/image automatically resizes, compresses, and serves images in modern formats with lazy loading and width hints. next/font self-hosts Google Fonts at build time so you don't ship a render-blocking request to fonts.googleapis.com on every page. API routes (app/api/foo/route.ts) give you a backend endpoint in the same project, sharing types with the frontend. Middleware runs at the edge, before a request hits a route, for things like auth redirects or A/B splits. Caching is granular: you can mark a fetch as force-cache, no-store, or revalidate every N seconds, and Next.js handles the storage and invalidation.

Deployment is where Vercel, the company behind the framework, makes its money. Next.js apps run on any Node host, but Vercel's platform is built around them — push to a Git branch and you get a preview URL, edge functions for low-latency middleware, image optimization served from a global CDN, and zero-config rollbacks. You don't have to use Vercel (Netlify, AWS, self-hosted Node, and OpenNext on Cloudflare all run Next.js apps) but the framework is designed with their infrastructure in mind, which is both its strength and the reason for periodic complaints about lock-in.

The "why does this exist" question has a sharper answer than most frameworks. React shipped the component model and stopped there. Single-page apps that resulted — load a blank <div id="root">, then download megabytes of JavaScript, then render — were great for app-like experiences (Gmail, Linear, Figma) and slow, fragile, and SEO-hostile for everything else. Next.js drags rendering back to the server where it always belonged for content, while keeping React's component ergonomics for the interactive parts. The trend is broader than one framework: Remix (now React Router 7), SvelteKit, Nuxt, SolidStart, and Astro all push the same direction — render on the server by default, hydrate selectively, send less JavaScript. Next.js is the most adopted of them, used by The Washington Post, TikTok, Notion, OpenAI's chat product, and a long tail of startups that picked it because the default answers were the right ones.