Modern Web Frameworks — React, Next, Tailwind, Framer

What the basics give you

Normal websites use HTML, CSS, JS:

HTML — the static structure
CSS — styling
JS — logic. It makes things dynamic: respond to clicks, fetch data, show/hide stuff.

The modern tooling stack

React

A frontend JavaScript library to build interactivity.

Next.js (by Vercel)

A full-stack React framework with more features:

Routing (e.g., /about, /contact)
Server-side rendering (SSR) and static site generation (SSG)
API routes (write backend functions)
SEO-friendly pages

Does not ship styling options.

Framer

Animation library for React. Smooth transitions and animations.

Tailwind CSS

Helps you style your page. PostCSS is a tool that takes your CSS and transforms it using plugins. .mjs = modular JS that supports import and export.

Difference — Next.js vs Tailwind

Next.js gives you the app structure and rendering logic.
Tailwind CSS gives you the design system (colors, spacing, typography, layout).

What happened to HTML?

Next.js writes in JSX (JavaScript + XML syntax). Next.js takes your JSX and turns it into actual HTML, CSS, and JavaScript when it builds your app. The browser still gets HTML, JS, CSS.

JSX lets you mix HTML + JavaScript logic in one place, so your UI becomes dynamic, interactive, and reusable. Lets you build UI with logic directly inside it. Plain HTML can’t do that.

Feature	Plain HTML	JSX / React (with Next.js)
Can insert dynamic content	No	Yes — `{name}`, `{data}`, `{date}`
Can reuse components	No — re-copy code	Yes — define once, use everywhere
Supports interactivity	No — needs JS manually	Yes — built-in with `useState`, `onClick`
Data-driven rendering	No — hard / verbose	Yes — use `.map()` to loop through data
Modular structure	No — one long file	Yes — break into clean components

TypeScript

Gives a label to all my things so I know what’s going on.

”Would you like your code inside a `src/` directory?”

If yes, Next.js puts your main files (pages, app, components) inside /src.
Keeps your root folder clean (only config files at the top).
Common in larger, organised projects.

App Router or not?

Feature	App Router (`/app`) — New	Pages Router (`/pages`) — Old
Routing	Nested, modern	Flat, traditional
Layouts & templates	Built-in + persistent	Manual
Loading states	Built-in via `loading.js`	Manual
Server components	Yes (default)	No
Learning curve	Higher	Easier for beginners
Long-term future	Preferred by Vercel & Next	Still supported

Routing!

/ → your front door (Home page)
/about → your about page
/contact → your contact form

You can:

Create multiple pages in your app (Home, About, Login, Dashboard, etc.)
Handle navigation without reloading the page (SPA = single-page app behaviour)
Show different layouts, protect routes (like /dashboard for logged-in users), or load dynamic data

app/
├── page.js         --> /       (Home page)
├── about/
│   └── page.js     --> /about  (About page)
├── contact/
│   └── page.js     --> /contact

Turbopack

Feature	Turbopack (new)	Webpack (default)
Speed	Much faster (especially in dev)	Slower
Stability	Still in early development	Very stable
Compatibility	May have issues with some plugins/tools	Very compatible
Production usage	Not used yet (only dev builds)	Used in production

Path alias

The default @/* alias is great, clean, and widely used in Next.js apps.

Running the project

npm run dev

See next

Next-Tailwind-Setup-Procedure — concrete install steps
Express-Static-Site-Tutorial — the lower-level Node/Express setup

Explorer

Modern Web Frameworks — React, Next, Tailwind, Framer