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)

my-app/
├── src/
│   ├── app/
│   │   ├── layout.tsx          # Root layout (wraps all pages)
│   │   ├── page.tsx            # Home page (/)
│   │   ├── globals.css         # Global styles
│   │   ├── about/
│   │   │   └── page.tsx        # /about
│   │   ├── blog/
│   │   │   ├── page.tsx        # /blog
│   │   │   └── [slug]/
│   │   │       └── page.tsx    # /blog/:slug
│   │   └── api/
│   │       └── hello/
│   │           └── route.ts    # API: GET /api/hello
│   ├── components/
│   └── lib/
├── public/                     # Static assets
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── package.json

---

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

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>
  );
}