Next.js Lesson 1: What is Next.js?

Next.js is the most popular React framework. While React handles UI, Next.js adds routing, server-side rendering, API routes, and a complete file-based system that lets you build full-stack apps.

React vs Next.js

// React (client-side only)
// - JavaScript runs in the browser
// - Search engines see an empty page initially
// - No built-in routing (need react-router)
// - No built-in API (need separate backend)

// Next.js adds:
// ✅ File-based routing (no config needed)
// ✅ Server-side rendering (great for SEO)
// ✅ API routes (backend in the same project)
// ✅ Image optimization, fonts, performance
// ✅ Static generation (ultra-fast pages)

Two Rendering Modes

// Static Site Generation (SSG)
// - Page built at BUILD TIME
// - Blazing fast (pre-rendered HTML)
// - Great for: blogs, docs, marketing pages

// Server-Side Rendering (SSR)
// - Page built on each REQUEST
// - Always fresh data
// - Great for: dashboards, e-commerce, social

// Client-Side Rendering (CSR)
// - Page built in the BROWSER (like regular React)
// - Great for: interactive dashboards, user-specific content

Companies using Next.js: TikTok, Twitch, Notion, Hulu, Target, Nike, and thousands more.