REACT & NEXT.JS / OVERVIEW

React & Next.js — The Full Map

Component-driven UI + full-stack framework — the modern web stack

EXPLANATION

React is a JavaScript library for building UIs through components — reusable, isolated pieces of UI that manage their own state.

Next.js is a full-stack framework built on top of React that adds:
• File-based routing (no react-router needed)
• Server-side rendering and static generation
• API routes (backend in the same project)
• Built-in optimizations (image, font, code splitting)

The mental model shift from traditional web dev:
• Old: HTML pages with JS sprinkled in
• React: JavaScript that returns HTML (JSX)
• Next.js: React + server capabilities in one framework

Two router systems (know which you're using):
• Pages Router (old) → pages/ directory, getServerSideProps
• App Router (new, recommended) → app/ directory, Server Components, layouts

This docs covers the App Router exclusively — it's the future.

DIAGRAM

REACT CORE               NEXT.JS ADDS
  ──────────────────────   ────────────────────────────
  Components & JSX         File-based routing
  Props & State            Layouts & nested routes
  Hooks (useState etc)     Server Components
  Context                  Server Actions
  Event handling           API Routes
  Lifecycle                Middleware
  ──────────────────────   Image/Font optimization
                           Static & Dynamic rendering
                           Caching strategies

  App Router file structure:
  app/
  ├── layout.tsx      ← wraps all pages
  ├── page.tsx        ← route: /
  ├── about/
  │   └── page.tsx    ← route: /about
  └── blog/
      ├── layout.tsx  ← wraps blog pages only
      └── [slug]/
          └── page.tsx ← route: /blog/:slug

CODE

BASH

1# Create a new Next.js project (App Router, TypeScript)
2bunx create-next-app@latest my-app --typescript --tailwind --app --yes
3cd my-app
4bun dev
5
6# Key dependencies for a real project
7bun add clsx tailwind-merge          # utility classes
8bun add zod                          # schema validation
9bun add @tanstack/react-query        # client-side data fetching
10bun add lucide-react                 # icons

NEXT →1. Components & JSX