Next.js is a React framework that adds file-based routing, server-side rendering, static site generation, API routes, and built-in optimizations — it handles the infrastructure decisions (bundling, compiling, routing) so you can focus on building React components.
Next.js adds file-based routing, server rendering, static generation, API routes, and built-in optimizations to React's component library.
Uses app/ directory with Server Components by default. Supports layouts, loading states, error boundaries, and streaming as first-class features.
All components are Server Components (zero client JS) unless marked with 'use client' — direct backend access, smaller bundles, better performance.
Next.js determines static vs dynamic rendering based on your code — static by default, dynamic when using cookies(), headers(), or searchParams.
Next.js is the most widely adopted React framework for production applications. While React is a library focused on building UI components, Next.js is a full framework that provides the architecture, tooling, and optimizations needed for production deployment.
React handles component rendering, state management, and UI updates. It deliberately doesn't include routing, server rendering, data fetching patterns, or build configuration — those are left to the developer or a framework.
Next.js adds everything React leaves out:
app/ defines URL routes automaticallyNext.js has two routing systems:
App Router (recommended, introduced in Next.js 13): Uses the app/ directory. Components are Server Components by default. Supports layouts, loading states, error boundaries, and streaming as first-class features. Uses React Server Components and Suspense.
Pages Router (legacy): Uses the pages/ directory. Every component is a Client Component. Uses getStaticProps/getServerSideProps for data fetching. Still supported but no longer receiving new features.
New projects should use the App Router. The Pages Router is maintained for backward compatibility.
app/
├── layout.tsx — Root layout (wraps all pages)
├── page.tsx — Home page (/)
├── about/
│ └── page.tsx — About page (/about)
├── blog/
│ ├── page.tsx — Blog list (/blog)
│ └── [slug]/
│ └── page.tsx — Blog post (/blog/my-post)
└── api/
└── users/
└── route.ts — API endpoint (/api/users)In the App Router, all components are Server Components unless you add 'use client' at the top of the file. Server Components render on the server, send HTML to the client, and never ship their JavaScript to the browser. This means:
Client Components (with 'use client') are needed for interactivity: event handlers, state, effects, and browser APIs.
Next.js automatically determines the rendering mode based on your code — if you use dynamic functions (cookies, headers, searchParams), the page becomes dynamic.
Next.js is a React framework that adds routing, rendering strategies (SSG/SSR/ISR/streaming), API endpoints, and optimizations. The App Router (recommended) uses Server Components by default — components render on the server with zero client JS unless 'use client' is added. The Pages Router is legacy. Next.js automatically determines rendering mode (static vs dynamic) based on your code.
Fun Fact
Next.js was created by Guillermo Rauch (CEO of Vercel) in 2016 with just 6 files. The original pitch was 'React but with server rendering and zero configuration.' It has since grown into the most-used React framework, with over 130,000 GitHub stars and adoption by companies like Netflix, TikTok, and Hulu.