Next.js is a React framework that adds server-side rendering, routing, and a bunch of built-in features that plain React doesn’t have.

React by itself is a library for building UI components. Next.js takes React and adds everything you need to build a full website: pages, routing, server rendering, API routes, image optimization, and more.

Why not just use React?

Plain React (Create React App or Vite + React) gives you a single-page app. The browser downloads a blank HTML page, then JavaScript renders everything. Problems:

• SEO is bad — search engines see an empty page
• Slow first load — user stares at a blank screen while JS downloads
• No routing — you need to install React Router yourself
• No server — you can’t run server-side code

Next.js solves all of these.

How Next.js renders pages

Next.js gives you three rendering options:

Server-Side Rendering (SSR) — the server builds the HTML on every request. Good for dynamic, personalized content.

Static Site Generation (SSG) — HTML is built at build time. Blazing fast. Good for blogs, docs, marketing pages.

Client-Side Rendering (CSR) — same as plain React. JavaScript renders in the browser. Good for dashboards, authenticated content.

You can mix and match per page. Your marketing pages can be static while your dashboard is client-rendered.

The App Router

Next.js uses file-based routing. Create a file, get a route:

app/
  page.tsx          → /
  about/page.tsx    → /about
  blog/[slug]/page.tsx → /blog/my-post

No router configuration. No <Route> components. Just files and folders.

Server Components

By default, components in the App Router run on the server. They can directly access databases, read files, call APIs — without exposing anything to the browser:

// This runs on the server — the database query never reaches the browser
export default async function UsersPage() {
  const users = await db.query('SELECT * FROM users');
  return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}

Need interactivity (clicks, state, effects)? Add "use client" at the top of the file.

API Routes

Build your backend right inside Next.js:

// app/api/users/route.ts
export async function GET() {
  const users = await db.query('SELECT * FROM users');
  return Response.json(users);
}

Now GET /api/users returns your data. No separate Express server needed.

When to use Next.js

Good fit:

• SEO matters (blogs, marketing sites, e-commerce)
• You want server-side rendering
• Full-stack app (frontend + API in one project)
• You already know React

Overkill for:

• Simple single-page apps (use Vite + React)
• Static sites with no React (use Astro or Hugo)
• Non-React projects

Next.js vs. alternatives

Framework	Best for
Next.js	Full-stack React apps, SSR
Remix	Full-stack React, web standards focus
Astro	Content sites, multi-framework
Nuxt	Same idea as Next.js but for Vue
SvelteKit	Same idea but for Svelte

For the full API and config reference, see the Next.js cheat sheet.