What Next.js adds to React

React builds interfaces from components. Next.js adds routing, server rendering, data access, request handlers, asset optimization, and a production build system around those components.

This course uses the App Router, the current file-system router built around Server Components, Suspense, and Server Functions. You do not need Vercel to run Next.js, and you do not need to replace every server with Next.js. Use it when one project benefits from a React interface and server capabilities that work together.

It helps to picture three outputs. The server sends HTML so the first screen can appear, a React Server Component payload describes the server-rendered component tree, and JavaScript hydrates only the Client Components that need interaction. These are related, but they are not the same artifact.

That distinction explains many design decisions. Database access belongs in server code because it needs credentials. A click handler belongs in client code because it runs in the browser. A route may combine both without turning the whole page into browser JavaScript.

For every feature, ask three questions: where does this code execute, what data crosses the boundary, and what does the user receive if JavaScript is slow or unavailable? Those answers are more useful than calling an entire page “server rendered” or “client rendered.”

Sketch one interface you could build in this course. Give it at least two pages, one dynamic page, and one form that changes data. Mark each piece as build-time, request-time server work, or browser work, then explain one boundary choice.