What Next.js adds to React

React builds interfaces from components. Next.js wraps those components with routing, server rendering, data access, HTTP handlers, asset optimization, and a production build pipeline.

We use the App Router in this course. It is 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 backend with it. Reach for Next.js when one project benefits from a React UI and server capabilities that work together.

Picture three outputs on the first request. The server sends HTML so the first screen can appear quickly. A React Server Component payload describes the server-rendered tree. JavaScript hydrates only the Client Components that need browser interaction. These three are related, but they are not the same artifact.

That split explains many design choices. Database access belongs in server code because it needs credentials. A click handler belongs in client code because it runs in the browser. One route can combine both without shipping the whole page as browser JavaScript.

My advice is to ask three questions for every feature: where does this code execute, what data crosses the boundary, and what does the user get if JavaScript is slow or unavailable? Those answers beat calling a whole page “server rendered” or “client rendered.”

Sketch one app 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 write one sentence explaining a boundary choice you made.