What is Next.js and how does it differ from Create React App

Next.js vs Plain React

React is a UI library. Next.js is a full-stack framework built on top of React. When you use Create React App, everything renders in the browser — the server sends an empty HTML shell and JavaScript fills it in. Next.js lets you choose: render on the server, at build time, or in the browser.

That choice matters for performance, SEO, and architecture. A marketing page benefits from static generation. A dashboard benefits from server-side rendering. A real-time chat benefits from client-side rendering. Next.js gives you all three without switching tools.

What Next.js Adds

Beyond rendering, Next.js provides file-based routing (your folder structure becomes your URL structure), API routes (write backend endpoints in the same project), image optimization, font optimization, and middleware. You get a production-ready setup without configuring Webpack, Babel, or a separate Express server.

App Router vs Pages Router

Next.js has two routing systems. The legacy Pages Router uses the /pages directory. The modern App Router (introduced in Next.js 13) uses the /app directory and enables React Server Components. All new projects should use the App Router. This course uses App Router throughout.

# Key mental model
Pages Router → /pages/about.tsx → /about
App Router  → /app/about/page.tsx → /about

The App Router is not just a different folder — it's a fundamentally different rendering model. Server Components run only on the server and send zero JavaScript to the client by default.