# Next.js and the App Router — Next.js

Source: https://www.skillbyai.com/en/nextjs/i-what

> React for the whole application.

## Routing, rendering and the server

**Next.js** is a React framework that adds what an application needs beyond components: **file-based routing**, **server rendering** and static generation, **data fetching** on the server, **mutations** through Server Actions, **API endpoints** (Route Handlers), image and font optimisation, and production builds. The modern **App Router** (the `app/` directory) is built on React Server Components: components run on the server by default and send HTML plus a compact payload to the browser, while interactive parts run as Client Components. The older Pages Router (`pages/`) is still supported. Next.js changes quickly between major versions; check the docs for your version (they ship inside node_modules/next/dist/docs).

## A full-stack React framework

Next.js adds routing, server rendering, data loading and an API layer on top of React.

![Three ideas: the framework, project structure, rendering strategies.](assets/figures/nextjs/section-1-map.svg) — Figure 1.1 — Framework, structure and rendering.

## A house kit, not just bricks

React gives you excellent bricks; Next.js is a kit with the floor plan, plumbing and wiring already laid out, so you build rooms instead of infrastructure.

## Learn React first

Next.js uses React components, hooks and props everywhere; solid React basics make Next.js much easier.

**Quiz:** In the App Router, where do components run by default?

- [ ] In a separate mobile app
- [ ] Only in the browser
- [x] On the server, as Server Components
- [ ] Nowhere until clicked

*Answer:* On the server, as Server Components. Client Components are opted into with "use client".