What is Next.js?
Why Next.js exists, what 'full-stack React' means, and how the App Router changes the game.
You already know React. But a plain React app (Create React App, Vite) ships an empty <div id="root"> and a pile of JavaScript. The browser downloads it, runs it, then fetches your data and finally paints the screen. That's slow for the first visit, invisible to search engines, and it leaves a big question unanswered: where does the backend live?
Next.js answers all three. It renders pages on the server (fast first paint, SEO-friendly), hydrates them into interactive React in the browser, and lets you write backend code — database queries, API endpoints, form handlers — right next to your components.
The mental model in one picture:
- Plain React (SPA): browser → download JS → run React → fetch data → render. The server is a dumb file host. You build a separate API somewhere else.
- Next.js (full-stack): browser asks for
/dashboard→ the server runs your React, fetches the data, and sends back finished HTML → the browser shows it instantly, then hydrates it into a live app.
Next.js is built and maintained by Vercel, and it's the framework the React team itself points people to for production apps.
What is the core difference between a plain React SPA and Next.js?
- ANext.js replaces React with a faster templating language
- BNext.js renders React on the server and lets you write backend code in the same project
- CNext.js only works for static marketing sites with no interactivity
- DNext.js removes the need to learn React
Next.js has two routing systems. You'll see both in tutorials, so know the difference:
- Pages Router (
pages/directory) — the original, still supported, but in maintenance mode. - App Router (
app/directory) — the modern system, built on React Server Components. It's the default for new apps and what this course teaches exclusively.
If you read a guide that puts files in a pages/ folder or uses getServerSideProps, it's the old router. Everything here uses the app/ directory.
The modern Next.js routing system, built on React Server Components, lives in the _____ directory.
What Next.js gives you out of the box — the reasons teams pick it:
- File-based routing — a file becomes a URL. No router config.
- Server-side & static rendering — pages render on the server or at build time.
- Server Components — components that run only on the server and never ship their JS to the browser.
- Server Actions — call server functions directly from a form, no API boilerplate.
- Route Handlers — real REST/JSON API endpoints under
app/api. - Built-in optimization — images, fonts, code-splitting, caching.
You'll touch every one of these in this course, building toward a full-stack feature backed by a real database.
Why does server rendering help with SEO compared to a plain React SPA?
- ASearch engines run a paid service to execute JavaScript on every site
- BThe server sends fully-rendered HTML, so crawlers see the real content immediately instead of an empty div
- CNext.js submits your pages to Google automatically
- DSPAs are blocked by search engines entirely
- Next.js is React plus a server. It renders your React on the server (fast first paint, SEO-friendly HTML) and lets you write backend code — data fetching, mutations, API endpoints — in the same project.
- The App Router lives in
app/and is built on React Server Components. It's the modern default; the olderpages/router is legacy. - Server rendering sends finished HTML to crawlers and browsers, and keeps secrets (database URLs, API keys) on the server where they never reach the user.
Next up: how folders inside app/ turn into URLs.