React is a library for building interfaces. It's powerful. It's well-written. And it tells you absolutely nothing about how to actually use it.
Routing? Pick a package. Data fetching? Pick another. Server rendering? That's three package decisions and half a day of configuration. Deployment? You're on your own. Before you've built the first component of your actual app, you've made thirty decisions about frameworks and infrastructure.
Next.js is the opinionated layer on top of React that makes all those decisions for you.
A folder is a URL
The most direct concept in Next.js is file-based routing. You create a file, you have a page. The file `app/about/page.tsx` corresponds to the address `/about`. The file `app/blog/[slug]/page.tsx` matches `/blog/anything` and gives you the slug as a variable.
That's it. No router to configure, no list to maintain. The folder structure is the router.
The server as default
Here's the idea that changes how modern web apps are built: components run on the server by default.
That sounds technical but the consequences are practical. A component that fetches products from your database does so directly on the server, without sending the database call to the browser, without waiting for the page to load, without showing a loading spinner. The data is already there when the page renders.
That's the difference from the old way of building React apps, where everything was fetched in the browser with `useEffect`, with accompanying loading states, race conditions, and unnecessary network calls.
Client Components: exactly when you need them
Not everything can run on the server. Buttons that should react to clicks, forms that update while you type, animations that respond to mouse movements. Those require the browser's JavaScript engine.
Next.js solves this with a simple directive. You add `'use client'` at the top of a component and that component runs in the browser as a traditional React element. The rest of the app stays on the server.
The principle is to keep the server footprint as large as possible. Anything that doesn't need interactivity should stay on the server.
The full stack in one package
What makes Next.js more than a routing library is that it includes the entire application layer. API endpoints are created as route handlers in the same folder structure. Server Actions handle form submissions without you writing a separate API. Image optimisation, font loading, metadata, and performance improvements are built in.
Vercel, which builds Next.js, has optimised its platform specifically for it. An app deployed on Vercel automatically handles caching, global distribution, and serverless infrastructure without you configuring anything.
The stack in this bootcamp — Next.js plus Supabase plus Vercel plus Claude Code — isn't a random combination. It was chosen because the four parts are designed to work together with minimal friction.