What Next.js is

You know React (building UIs from components) and the ideas of a back-end. Next.js is the most popular React framework — it takes React and adds everything you need to build complete, production applications: routing, server-side rendering, data fetching, APIs, and more, all in one. It's the standard for professional React work, and it lets you build full-stack apps in one project. Let's understand what Next.js gives you.

React vs a React framework

React is a library for building user interfaces — components, state, hooks. But React alone doesn't handle routing (pages/URLs), server rendering, data fetching conventions, building an API, or production optimization. You'd assemble many tools yourself. Next.js is a framework built on React that provides all of this, with sensible conventions — so you focus on your app, not the plumbing. It's "React with everything you need to ship."

What Next.js adds

• Routing — file-based routing (your folder structure is your routes) — no router library to configure.
• Server rendering — pages render on the server by default (via React Server Components), for speed, SEO, and security.
• Data fetching — fetch data right in your components on the server (even query a database directly).
• Full-stack — build API endpoints and server-side logic in the same project (Server Actions, Route Handlers) — front-end and back-end together.
• Optimizations — automatic code-splitting, image/font optimization, caching, and more, built in.
• Great developer experience — fast refresh, TypeScript support, and clear conventions.

So Next.js is how you build real, complete, fast React applications — from simple sites to full-stack apps.

The App Router (modern Next.js)

Modern Next.js uses the App Router — a file-system based router built on React's latest features (Server Components, Suspense, Server Functions). You build your app inside an app/ directory, where folders define routes and special files (page, layout, route) define UI and behaviour. This course teaches the App Router (the current standard). (An older "Pages Router" exists in legacy projects, but new apps use the App Router.)

Server Components by default (the big idea)

// In the App Router, components render on the SERVER by default.
// A page can be an async function that fetches data directly:
export default async function Page() {
  const posts = await getPosts()   // runs on the server (DB/API access, secrets safe)
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

The defining feature: components are Server Components by default — they render on the server, can fetch data directly (even query a database), keep secrets off the client, and send less JavaScript to the browser. You add interactivity with Client Components where needed. This server-first model (covered in depth later) is what makes Next.js fast and full-stack. Notice a page can be async and await data right in the component — no useEffect needed for server data.

The mistake beginners make

Thinking Next.js is a different framework to learn from scratch — it's React (everything you know applies) plus a framework around it. Also, applying old Next.js knowledge — Next.js evolves fast, and the App Router (with Server Components, async params, the use cache directive, Server Actions) differs significantly from older versions and the Pages Router. This course targets the current App Router. Understand Next.js as production-ready React with routing, server rendering, data fetching, and full-stack capability built in — and learn the current App Router conventions.

Your turn

Reflect on what Next.js provides beyond React:

// React alone gives you: components, state, hooks (the UI).
// Next.js ADDS:
//   - routing (folders = routes)
//   - server rendering (Server Components)
//   - data fetching on the server (await in components)
//   - full-stack (API endpoints, Server Actions) in ONE project
//   - built-in optimizations (images, fonts, code-splitting, caching)
//
// = a complete framework for building production React apps.

---

Your turn

1. Understand Next.js as a React FRAMEWORK adding routing, server rendering, data fetching, full-stack, and optimizations.
2. Know it uses the App Router (app/ directory, file-based routing) built on React Server Components.
3. Grasp the server-first model: components render on the server by default (async, direct data access), with Client Components for interactivity.

Key points

• Next.js is the leading React FRAMEWORK — React plus routing, server rendering, data fetching, full-stack APIs, and optimizations.
• It uses the App Router: an app/ directory where folders define routes and special files (page, layout, route) define UI/behaviour.
• Components are Server Components by DEFAULT — they render on the server, fetch data directly (await in the component), and keep secrets off the client.
• It's React (everything applies) plus a framework — learn the CURRENT App Router conventions (they differ a lot from older Next.js).