Introduction to Next.js & the App Router

What Next.js Is

React is a UI library — it renders components, full stop. A real product also needs routing, server rendering, data fetching, image optimisation, API endpoints, and a deployment story. Next.js is the React framework that supplies all of it, and it’s what React’s own docs recommend for new apps.

Why Rendering on the Server Matters

A pure React SPA ships an empty HTML shell plus a JavaScript bundle; users stare at a blank page until JS downloads and runs, and search engines see nothing. Next.js renders HTML on the server first:

• Fast first paint — real content arrives in the initial response.
• SEO — crawlers get full HTML.
• Less client JS — components that never need interactivity ship zero JS.

Create a Project

npx create-next-app@latest my-app
# say yes to: TypeScript (or JS), ESLint, Tailwind (optional), App Router
cd my-app
npm run dev          # → http://localhost:3000

Project Structure

my-app/
├── app/                  # the App Router — folders = URLs
│   ├── layout.js         # root layout (html/body, nav, fonts)
│   ├── page.js           # the / route
│   └── globals.css
├── public/               # static files served as-is
├── next.config.mjs
└── package.json

Your First Pages

In the App Router, a folder is a URL segment and page.js makes it routable:

// app/page.js  →  /
export default function Home() {
  return <h1>Coding India</h1>;
}

// app/about/page.js  →  /about
export default function About() {
  return <h1>About us</h1>;
}

No router config, no route components — the filesystem is the router. Save a file and the dev server hot-reloads.

What’s Ahead

This series assumes the React fundamentals from the React tutorial (components, props, state, hooks). Here you’ll learn what Next adds: layouts and nested routing, server vs client components, server-side data fetching with caching, route handlers, server actions, SEO, auth, and deployment.