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)

graph TD
  root["my-app/"] --> src["src/"]
  root --> public["public/ — static assets"]
  root --> nextcfg["next.config.ts"]
  root --> tailwind["tailwind.config.ts"]
  root --> tscfg["tsconfig.json"]
  root --> pkg["package.json"]
  src --> app["app/"]
  src --> components["components/"]
  src --> lib["lib/"]
  app --> layout["layout.tsx — root layout (wraps all pages)"]
  app --> page["page.tsx — home page (/)"]
  app --> globals["globals.css — global styles"]
  app --> about["about/"]
  app --> blog["blog/"]
  app --> api["api/"]
  about --> aboutPage["page.tsx — /about"]
  blog --> blogPage["page.tsx — /blog"]
  blog --> slug["[slug]/"]
  slug --> slugPage["page.tsx — /blog/:slug"]
  api --> hello["hello/"]
  hello --> route["route.ts — API: GET /api/hello"]

---

File-Based Routing

In the App Router, folders define routes and special files define the UI for each route segment:

File	Purpose
page.tsx	The UI for a route — makes the route accessible
layout.tsx	Shared UI that wraps child routes
loading.tsx	Loading UI shown while content loads
error.tsx	Error UI shown when something fails
not-found.tsx	UI for 404 errors
route.ts	API endpoint (GET, POST, etc.)

How Routes Map to URLs

File	Route
src/app/page.tsx	/
src/app/about/page.tsx	/about
src/app/blog/page.tsx	/blog
src/app/blog/[slug]/page.tsx	/blog/my-first-post
src/app/dashboard/settings/page.tsx	/dashboard/settings

---

Pages

A page.tsx file makes a route publicly accessible. It is the leaf node of a route:

// src/app/page.tsx — the home page
export default function HomePage() {
  return (
    <main>
      <h1>Welcome to My App</h1>
      <p>This is the home page.</p>
    </main>
  );
}