Next.js: The React Framework (App Router)Entry 1 of 16

What a Framework Adds to React

Next.js is a framework built on React. React renders UI; Next.js adds routing, server rendering, data fetching, caching, and a build system.

Notes

Plain React (a Vite single-page app) sends an empty HTML page and builds everything in the browser. That's fine for dashboards behind a login, but slow for first paint and weak for SEO. Next.js renders on the server or at build time, so the browser receives real HTML.

What Next.js provides that React doesn't:

  • Routing from the folder structure (no React Router).
  • Server Components that run only on the server and ship no JavaScript.
  • Data fetching with async components and a built-in cache.
  • Mutations through Server Actions instead of hand-written API calls.
  • Optimizations: images, fonts, code splitting, prefetching.

Angular already ships routing, HTTP, and a build system. @angular/ssr adds server rendering and prerendering. The closest Angular counterpart to Next.js is therefore Angular + @angular/ssr.

What / Why / When

What

A full-stack framework layer on top of React.

Why

Faster first paint, SEO, and less hand-built plumbing.

When

Public pages, content sites, e-commerce, or any app that benefits from server rendering. A purely client-side tool behind a login can stay a plain React app.

Use case

A blog with public post pages and an admin area.

Code compare

Next.js
npx create-next-app@latest my-app --typescript --appnpm run dev
Angular
ng new my-app --ssrng serve

Differences and gotchas

  • React itself recommends starting new apps with a framework such as Next.js.
  • Angular is already a framework. --ssr is the only addition needed to match Next.js's rendering model.

Quick reference

Next.jsAngular
create-next-appng new --ssr
React + routing + SSR + cachingAngular + @angular/ssr