Introduction to Next.js

Next.js is a React framework that provides structure, performance optimisations, and full-stack capabilities out of the box. This lesson introduces the App Router, file-based routing, pages, layouts, loading and error files, metadata, and project structure.

---

Why Next.js?

React on its own is a UI library — it does not handle routing, data fetching, or server-side rendering. Next.js fills these gaps:

Feature	React alone	Next.js
Routing	Third-party (React Router)	Built-in file-based routing
Server-side rendering	Manual setup	Automatic
Static site generation	Not built-in	Built-in
API routes	Separate server	Built-in route handlers
Image optimisation	Manual	next/image component
Code splitting	Manual	Automatic
TypeScript	Manual config	Zero-config

---

Creating a Next.js Project

npx create-next-app@latest my-app --typescript --tailwind --app --src-dir
cd my-app
npm run dev

This creates a project with the App Router, TypeScript, Tailwind CSS, and a src/ directory.

---

Project Structure (App Router)