Next.js Introduction: React for Production

React gives you a powerful way to build user interfaces out of components, but on its own it leaves many production concerns unanswered: routing, server rendering, code splitting, image optimization, and SEO. Next.js is a full-stack React framework that answers all of those questions with sensible defaults. In this lesson you will learn what Next.js is, why teams choose it, and how its core ideas fit together, so the rest of this course feels natural.

What Is Next.js?

Next.js, created by Vercel, is a framework built on top of React. Instead of shipping an empty HTML shell and rendering everything in the browser, Next.js can render pages on the server, at build time, or on demand, and then hydrate them into a fully interactive React app. Since version 13, the recommended way to build apps is the App Router, which lives in the app directory and embraces React Server Components. Next.js 14 and 15 refined this model with faster bundling and improved caching, and it is the approach this whole course uses.

Why Not Plain React?

A plain React app created with a bundler like Vite is client-side rendered. The browser downloads JavaScript first, then builds the page. That has real costs:

Search engines and link previews may see an empty page before JavaScript runs.
Users on slow devices wait for a large bundle before seeing content.
You must wire up routing, data fetching, and code splitting yourself.

Next.js solves these problems out of the box:

Server-side rendering (SSR) and static site generation (SSG) deliver real HTML immediately.
File-based routing turns folders into URLs with zero configuration.
Automatic code splitting sends each page only the JavaScript it needs.
Built-in optimization for images, fonts, scripts, and metadata.
API route handlers let you write backend endpoints in the same project.

The Rendering Spectrum

The key mental model in Next.js is that rendering is a spectrum, not a single choice. A marketing page can be generated once at build time and served from a CDN. A dashboard can be rendered on the server per request with fresh data. A highly interactive widget can render on the client. Next.js lets you mix all three in one application, page by page and even component by component.

jsx

// app/page.js - a Server Component rendered on the server by default
export default async function HomePage() {
  const res = await fetch('https://api.github.com/repos/vercel/next.js');
  const repo = await res.json();
  return (
    <main>
      <h1>Next.js has {repo.stargazers_count} stars</h1>
      <p>This HTML was rendered on the server.</p>
    </main>
  );
}

Notice what is happening here: the component is an async function, it fetches data directly with await, and no useEffect or loading spinner is required. The user receives finished HTML. This is the Server Components model that makes the App Router special.

What You Need Before Starting

You do not need to be a React expert, but you should be comfortable with:

Modern JavaScript: arrow functions, destructuring, modules, async/await.
React basics: components, props, state, and JSX.
Node.js 18.18 or later installed on your machine.

If you can build a small React component that renders a list from an array, you are ready.

Where Next.js Shines

Next.js powers e-commerce stores, documentation sites, SaaS dashboards, and blogs at companies like Netflix, TikTok, and Notion. It is a strong choice whenever SEO matters, initial load speed matters, or you want frontend and backend logic in one codebase. For a purely internal tool where SEO is irrelevant, plain React is still fine, but Next.js rarely gets in the way even there.

Key Takeaways

Next.js is a production framework on top of React, not a replacement for it.
The App Router with React Server Components is the modern, recommended approach.
Rendering is flexible: static, server, and client rendering can coexist in one app.
You get routing, code splitting, image optimization, and API routes with no extra setup.

Next up: in Lesson 2 we will create a real Next.js app with create-next-app and walk through every file and folder it generates.